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

Question

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

36

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

- Mahmud Adam

1

我并没有仔细研究vue-cli的样板文件，而是使用了yeoman的这个生成器。即使我对webpack/gulp/browser-sync知之甚少（尽管在我试图将其与后端集成时有一些小问题），它也让我入门了。我认为值得一看，并在vue-cli和它之间做出选择。 - JJPandari

4个回答

30

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

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的信息进行了更正。

注意：

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

参考资料：

- Mani

那么使用 webpack-simple 模板更加困难吗？ - Mahmud Adam

1

我认为webpack-simple旨在让人们开始使用Vue.js。而webpack模板则提供了更多的配置选项，甚至还有一个详细的帮助页面提供额外的信息。 - Mani

1

正如你所说，如果你从简单的模板开始编写大量代码，后期会变得更加困难，因为你需要自己完成所有额外的配置工作。 - Mani

1

这里可能不需要CORS，我在后端添加了静态文件插件/库，以便它可以提供“index.html”，并使前端开发服务器代理每个请求到后端服务器。没有CORS，更加简洁。 - JJPandari

1

谢谢提供这些信息！我刚在本地进行了一些快速实验，发现我们需要CORS头，或者在webpack dev的proxyTable选项中设置changeOrigin: true。代理服务器是使用http-proxy-middleware完成的 - 这个github页面证实了changeOrigin选项将主机头更改为服务器URL（目标）。 - Mani

@潘俊杰，根据您的评论，我已经更正了我的答案。正如您所说，没有CORS的服务器更加干净，并且避免了潜在的安全漏洞，以防生产服务器最终提供这些CORS头。 - Mani

6

module.exports = {

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

};

- Chameera W. Ashan

1

这是最佳答案，因为它提供了pathRewrite。除非您将/api添加到所有开发服务器的URI中，否则您将需要此功能。 - Eric Goode

0

如果这些答案不起作用，请尝试添加以下内容： http://127.0.0.1:{你的端口} 在我的情况下，没有这个内容会无法启动。

- Kampouse

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- acdcjunior · Accepted Answer

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