配置中的 devServer 代理抛出 404答案

【问题标题】：devServer proxy in config throws 404配置中的 devServer 代理抛出 404
【发布时间】：2019-06-10 12:10:39
【问题描述】：

我有这个在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没有问题

如何调试？

【问题讨论】：

你的后端路由是如何构成的？您的后端是否期望 /api 作为前缀？如果不尝试pathRewrite: { '^/api': ''} 作为附加选项
@FrankProvost 我尝试添加pathRewrite，但没有任何区别（即使在重新启动服务器后）。您是指 API 的路由还是 Web 应用的路由？
我说的是 api 的路由。你在浏览器中打开什么 url 来查看 api 结果？ localhost:8081/api/parts 还是没有 /api?
@FrankProvost 与/api
@FrankProvost 是的，我得到了同样的结果。它就像应用程序完全忽略了代理（没有任何尝试在任何地方的 8081 请求的痕迹（

标签： javascript api vue.js webpack

【解决方案1】：

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

服务器的配置参考可以在这里找到：https://cli.vuejs.org/config/#devserver-proxy 但看起来你实际上做对了。该文件位于错误的文件夹中。

【讨论】：

天啊。这救了我。我一直被指向其他端口，同时修改我可以修改的所有东西，以便让我的工作正常！！谢谢！
很高兴我能帮上忙 :)

【解决方案2】：

不对，如果你使用代理，你的远程地址必须与请求的url和端口相同，所以你的vue.config.js应该编辑如下：

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

或者你可以像这样使用重写属性：

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

不同的是真正的请求，top 是http://localhost:8080/api/...，rewrite 是http://localhost:8080/...

【讨论】：

欢迎来到 StackOverflow 黄西伟 :)

【解决方案3】：

在尝试了几个组合后我遇到了同样的问题，我终于弄明白了。

我正在使用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;
})

浏览器的网络标签：

【讨论】：