使用 vue-cli 将请求代理到单独的后端服务器

Question

我正在使用 vue-cli webpack-simple 模板来生成我的项目，并且我想将请求代理到单独的后端服务器。这怎么能轻松实现？

原文由 Mahmud Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用 webpack 模板和 vue-cli ，那么您可以在此参考文档中找到所需的信息：

http://vuejs-templates.github.io/webpack/proxy.html

或者现在不更改模板，您可以将 webpack 模板中的相关配置复制到本地 webpack-simple 模板中。

编辑：来自我的本地设置的更多信息

这就是我的 config/index.js 在 module.exports --- 下的内容：

 dev: {
    env: require('./dev.env'),
    port: 4200,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true
        },
        '/images': {
            target: 'http://localhost:8080',
            changeOrigin: true
        },
        // and so on...

上面的配置在端口 4200 上运行我的 vue-cli ，我在端口 8080 上运行我的服务器。

编辑：在评论 #4 和 #5 之后更正了有关 CORS 的信息

笔记：

• --- 中的 dev.proxyTable changeOrigin 选项（在 webpack 配置中）确保您不需要在服务器 API 响应中提供 CORS 标头。
• 如果您出于任何原因决定省略 changeOrigin ，那么您需要确保您的服务器 API 在其响应标头中包含 Access-Control-Allow-Origin: * （或等效项）。

参考：

1. https://stackoverflow.com/a/36662307/654825
2. https://github.com/chimurai/http-proxy-middleware

原文由 Mani 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 @vue/cli 3.x 中：

• 在项目的 根 文件夹中创建一个 vue.config.js 文件（如果您还没有的话）。
• 其内容如下：

 // vue.config.js
module.exports = {
  devServer: {
    proxy: {
      "/gists": {
        target: "https://api.github.com",
        secure: false
      }
    }
  }
};

现在对（假设您的开发服务器位于 localhost:8080 ） http://localhost:8080/gists 的任何调用都将被重定向到 https://api.github.com/gists 。

另一个例子：代理所有调用

假设您有一个本地后端服务器，通常部署在 localhost:5000 并且您希望将所有调用重定向到 /api/anything 到它。利用：

 // vue.config.js
module.exports = {
    devServer: {
        proxy: {
            "/api/*": {
                target: "http://localhost:5000",
                secure: false
            }
        }
    }
};

原文由 acdcjunior 发布，翻译遵循 CC BY-SA 3.0 许可协议