javascript - devServer proxy in config throws 404 - Stack Overflow

admin管理员组

文章数量:1344319

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 => mit('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?

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 => mit('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?

• javascript
• api
• vue.js
• webpack

Share Improve this question Follow edited Jan 16, 2019 at 11:57 Bassie asked Jan 16, 2019 at 11:52 BassieBassie 10.4k99 gold badges8484 silver badges186186 bronze badges 9

• 1 How are your backend routes structured? Does your backend expect the /api as prefix? If not try pathRewrite: { '^/api': ''} as additional option – Frnak Commented Jan 16, 2019 at 12:06
• @FrankProvost I tried adding pathRewrite but it made no difference (even after restarting the server). Do you mean the routes for the api or for the web app? – Bassie Commented Jan 16, 2019 at 12:10
• I'm talking about the routes for the api. What url do you open in your browser to see the api result? localhost:8081/api/parts or without the /api? – Frnak Commented Jan 16, 2019 at 12:13
• @FrankProvost its with the /api – Bassie Commented Jan 16, 2019 at 12:15
• 1 @FrankProvost Ye, I get the same result. Its like the app is just ignoring the proxy altogether (there is no trace of any attempt to request at 8081 anywhere( – Bassie Commented Jan 16, 2019 at 12:21

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 7

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/config/#devserver-proxy but it seems you're actually doing it right. The file is just at the wrong folder.

I had the same issue after trying a couple of binations finally I figured it out.

I am using Axios and my application is running at port 8080

main.js:

axios.defaults.baseURL = 'http://localhost:8080/api/'

vue.config.js

module.exports = {
    devServer: {
      proxy: 'https://reqres.in'
    }
}

My Vue Component

this.axios.get("users")
   .then(response => {
    this.items = response.data.data;
    this.isLoading = false;
})

Browser's Network tab:

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/...

本文标签： javascriptdevServer proxy in config throws 404Stack Overflow