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

Question

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

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（在 webpack 配置中）中的 changeOrigin 选项可确保您无需在服务器 API 响应中提供 CORS 标头。
• 如果您出于任何原因决定省略 changeOrigin，则需要确保您的服务器 API 在其响应标头中包含 Access-Control-Allow-Origin: *（或等效项）。

参考资料：

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

Answer 2

在 @vue/cli 3.x：

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

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

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

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

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

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

Answer 3

module.exports = {

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

};