使用vue-cli向单独的后端服务器发送代理请求

Question

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

Answer 1

在 @ vue / cli 3.x ：

中

• 如果您还没有项目，请在项目的 root 文件夹中创建一个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
            }
        }
    }
};

Answer 2

如果您将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... ：

vue-cli

以上配置在端口4200上运行我的changeOrigin，并在端口8080上运行我的服务器。

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

注意：

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

<强>参考文献：

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

Answer 3

module.exports = {

    devServer: {
        proxy: {
            '/api': {
                target: 'http://genius.net',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
            '/auth': {
                target: 'http://genius23.net',
                changeOrigin: true,
                pathRewrite: {
                    '^/auth': ''
                }
            },
        }
    }

};