vue.config.js devServer not taken into account

Viewed 1590

I create a front end vue.js with a springboot microservice as back end. I'm trying to call my back end (running on another pc 192.168.0.10:9090 in local network) from my front-end vue.js dev server (running localhost:8080).

I configured it in vue.config.js like it's noticed in official website :

module.exports = {
  transpileDependencies: ["vuetify"],
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.10:9090',
        changeOrigin: true,
      }
    }
  }
};

Test 2 : same result with

 module.exports = {
      devServer: {
        proxy: 'http://192.168.0.10:9090'
      }
    }

Test 3 : same result with

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.10:9090',
        changeOrigin: true,
        pathRewrite: {               // added this
          '^/api': ''                // added this
        },                           // added this
      }
    }
  }
};

my store.js

async get(commit, id){     
      var response = await axios({
        method: 'get',
        url:'/api/getmeeting',
        params: {'guid' : id}
      })
      console.log(this.response)
      return response.data; 
    }

Test 2 :

  async get(commit, id){     
          var response = await axios({
            method: 'get',
            url:'/getmeeting',
            params: {'guid' : id}
          })
          console.log(this.response)
          return response.data; 
        }

I didn't suceed to use my proxy declared in vue.config.js.

Problem : All request go to localhost:8080/api/getmeeting?guid=xxxxx whereas it should call 192.168.0.10:9090/getmeeting...

I read all official documentation, relatives subjects in stack for 8 hours and nothing worked.

So can you give me tips in order to find why my devServer isn't recognized?

1 Answers

You need pathRewrite:

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://192.168.0.10:9090',
        changeOrigin: true,
        pathRewrite: {               // added this
          '^/api': ''                // added this
        },                           // added this
      }
    }
  }
};
Related