devServer proxy in config throws 404

Question

I have this in src/vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
      },
    },
  },
};

and I'm calling the api with

  axios.get('/api/parts')
    .then(result => commit('updateParts', result.data))
    .catch(console.error);

But I just keep getting

Error: "Request failed with status code 404"

And I can see the request is being made to port 8080 instead of 8081

I can access the api in the browser with no problems

How can I debug this?

Answer 1

Your vue.config.js is not supposed to be in the src folder. It must be in the root of your project. Simply move the file.

The configuration reference for the server can be found here: https://cli.vuejs.org/config/#devserver-proxy but it seems you're actually doing it right. The file is just at the wrong folder.

Answer 2

it is not right, if you use proxy, your remote address must be same as request url and port, so your vue.config.js should be edited like below:

proxy: {
          '/api': {
              target: 'http://localhost:8080',
              changeOrigin: true
          }

or you can use rewrite attribute like this :

proxy: {
          '/api': {
              target: 'http://localhost:8080',
              changeOrigin: true,
              pathRewrite: { '^/api': '/'}
          }
      }

the difference is the real request, top will be http://localhost:8080/api/..., rewrite will be http://localhost:8080/...