是否可以在相同的主机名和端口上运行 webpack 开发服务器和后端服务器以避免 CORS？

Posted 2023-03-03

【中文标题】是否可以在相同的主机名和端口上运行 webpack 开发服务器和后端服务器以避免 CORS？

【英文标题】：Is it possible to run webpack dev server and backend server on same hostname and port to avoid CORS?

【发布时间】：2017-03-07 16:07:06

【问题描述】：

我正在运行一个后端 Laravel API 和一个前端 Vue.js 应用程序。

选项 #1 将这两个设置如下：

api.example.com => serving the API
app.example.com => serving the frontend appplication

然而，这会让你在 CORS、OPTIONS 预检等方面遇到麻烦。

所以为了避免这种情况，我打算这样设置：

app.example.com/api => serving the API
app.example.com => serving the frontend appplication

所以没有更多的 CORS 问题，但是由于我使用的是 Webpack，我在本地开发中遇到了问题。 Webpack 开发服务器正在为前端提供服务：

app.example.com:8080

同样，我在尝试访问端口 80 上的 API 时遇到了 CORS :-(

帮助！我该如何设置，这样我就不必处理 CORS 却能够使用 Webpack 开发服务器和 Laravel (Homestead) API 后端？

我认为不可能从相同的主机名和端口同时为 Homestead 和 Webpack 提供服务。但是有没有避免 CORS 的设置？

【参考方案1】：

有一种方法可以通过使用代理机制来避免执行 cors 请求。然后你基本上有了你描述的解决方案，app.example.com/api 用于后端，app.example.com 用于前端。 webpack-dev-server 接收你的请求并将它们转发到配置的后端。示例配置可能如下所示：

devServer: 
    proxy: 
        '/api*': 
            target: 'http://app.example.com:8080'
        ,
    ,
,

根据您的后端的设置方式，您可能需要查看rewrite 函数以在将请求交给后端之前对路径进行一些处理。

有关更多详细信息，请参阅 webpack-dev-server 文档：https://webpack.github.io/docs/webpack-dev-server.html#proxy

如果你想在生产中运行这些东西，那么你不会使用 webpack-dev-server，而是在你正在使用的 web 服务器中设置代理配置（例如 apache 或 nginx）。

【讨论】：

谢谢！这工作得很好......我还在这里找到了更多信息：vuejs-templates.github.io/webpack/proxy.html

顺便说一句...感谢您还指出了服务器端的要求！使您的答案非常完整和有帮助！

【参考方案2】：

相关回答：CORS error on same domain?

域、子域和端口需要相同，这基本上意味着除非您从同一服务器同时提供 app 和 api，否则您需要小心的 CORS。没有办法逃避。

您的 webpack 开发环境只能帮助您开发 vue.js 应用程序。它不能做服务器端的事情。您将需要在不同的端口上使用您的服务器。因此，您必须为所有 API 请求设置 Access-Control-Allow-Origin:*。

官方参考：https://www.w3.org/Security/wiki/Same_Origin_Policy