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

我正在使用

vue cli

webpack simple

模板生成我的项目，我希望将请求代理到一个单独的后端服务器。这怎么容易做到呢

如果将

webpack

模板与

vue cli

一起使用，则可以在本参考文档中找到所需信息：

或者，您可以将

webpack

模板中的相关配置复制到本地

webpack simple

模板中，而不是现在更改模板

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

这是我在

module.exports下的
config/index.js
中的内容：

dev:{
环境：需要（'./dev.env'），
港口：4200，
资产子目录：“静态”，
AssetPublicPath:“/”，
代理表：{
“/api”：{
目标：'http://localhost:8080',
更改来源：正确
},
“/图像”：{
目标：'http://localhost:8080',
更改来源：正确
},
//等等。。。

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

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

注意：


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

参考文献：



在@vue/cli 3.x中：


在项目的根文件夹中创建
vue.config.js
文件（如果您还没有）

其内容如下:

//vue.config.js
module.exports={
开发服务器：{
代理：{
“/gists”：{
目标：“https://api.github.com",
安全：错误
}
}
}
};

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



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

//vue.config.js
module.exports={
开发服务器：{
代理：{
“/api/*”：{
目标：“http://localhost:5000",
安全：错误
}
}
}
};
所以使用webpack simple模板更难？我认为
webpack simple
旨在开始使用Vue.js。
webpack
模板提供了更多的配置，甚至还有更多的信息。正如你正确地说的，如果你从简单模板开始编写一个很多代码，因为你需要自己完成所有额外的配置工作。我们这里可能不需要CORS，我在我的后端添加了静态文件插件/库，这样它就可以服务
index.html
，并让前端开发服务器代理后端服务器的每个请求。没有更多CORS，更干净一些。谢谢你的信息！我只是做了一些快速的体验nt本地，发现我们需要CORS头，或者在Web包开发的proxyTable选项中设置
changeOrigin:true
。服务器代理使用-此github页面确认
changeOrigin
选项将主机头更改为服务器URL（目标）。我并没有仔细查看vue cli的样板文件，而是使用了它。它让我开始了，尽管我对webpack/gulp/browser sync知之甚少（尽管我尝试将其与后端集成时遇到了一些问题）。我认为值得一看，并在
vue cli
和it之间进行选择。谢谢，这帮了我的忙。恼人的是，通过大量的谷歌搜索查找此信息并不是非常容易。有人可以链接到我应该在其中找到此信息的文档吗？相关
devServer
网页包文档：这是最好的答案，因为它提供了除非您将/api添加到所有dev服务器的URI中，否则您将需要它。
module.exports = {

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

};