带 Axios 的开发服务器代理答案

【问题标题】：Devserver Proxy w/ Axios带 Axios 的开发服务器代理
【发布时间】：2020-05-09 13:35:56
【问题描述】：

我似乎无法在我的 vue / express 应用程序中获取 devServer：代理设置。

我的 vue.config.js 文件位于客户端文件夹的根目录中，如下所示：

module.exports = {
  devServer: {
    proxy: {
      'api': {
        target: 'http://localhost:5000'
      }
    }
  },
  transpileDependencies: [
    'vuetify'
  ]
}

我正在使用这样的 axios 从前端发送请求：

const response = await http.get("/api/auth/authenticate");

我的 express 应用程序在 localhost:5000 上运行，并且我已经这样配置了端点：

...other endpoints
app.use("/api/auth", authController);

请求在我的网络标签中显示为：

Request URL: http://localhost:8080/api/auth/authenticate

并返回 404 错误。

我在这里错过了什么？

【问题讨论】：

如果直接在浏览器地址栏输入http://localhost:5000/api/auth/authenticate呢？这会到达相关路线还是得到 404？
@skirtle 是的，返回预期结果
值得确认配置文件是否受到尊重。尝试将port: 6789, 放在devServer 部分中，就在proxy 配置上方。这应该在不同的端口上启动您的开发服务器，确认文件正在执行某些操作。

标签： express vue.js

【解决方案1】：

因为现在它不是从你的后端获取，而是搜索一些静态内容（达到 8080，vue 必须在这个端口上运行）。尝试使用，使其重定向到代理：

    proxy: {
      '^/api': {
        target: 'http://localhost:5000',
        ws: false,
        changeOrigin: true
      },

或者只是 '/api' 而不是 '^/api'

【讨论】：

不幸的是没有改变任何东西。有没有办法可以检查代理实际上是否正在创建？当我运行 npm run serve 来启动客户端时，有太多的 webpack 构建输出，我看不到那里是否还有其他东西。