配置中的devServer代理抛出404

Question

我在src/vue.config.js中有这个

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

我正在用

调用api

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

但我一直在得到

  

错误：“请求失败，状态码为404”

我可以看到正在向8080端口而不是8081端口发出请求

我可以在浏览器中毫无问题地访问api

我该如何调试呢？

Answer 1

您的vue.config.js不应位于src文件夹中。它必须在项目的根目录中。只需移动文件即可。

可在以下位置找到服务器的配置参考：https://cli.vuejs.org/config/#devserver-proxy，但看来您实际上是在正确地进行操作。该文件位于错误的文件夹中。

Answer 2

尝试了几种组合后，我遇到了同样的问题，最后我发现了。

我正在使用Axios，并且我的应用程序正在端口8080上运行

main.js：

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

vue.config.js

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

我的Vue组件

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

“浏览器的网络”标签：

Answer 3

这是不对的，如果您使用代理，则您的远程地址必须与请求url和端口相同，因此您的vue.config.js应该按如下所示进行编辑：

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

或者您可以使用以下重写属性：

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

区别在于实际请求，顶部为http://localhost:8080/api/ ...，重写为http://localhost:8080/ ...