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

Question

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

Answer 1

在@ 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
            }
        }
    }
};

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,我在端口8080上运行我的服务器.

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

注意:

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

参考文献:

1. /sf/answers/2566361521/
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': ''
                }
            },
        }
    }

};