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

Question

我是运行后端 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 吗？

Answer 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 而是在你正在使用的网络服务器中设置代理配置（例如 apache 或 nginx） .

Answer 2

相关回答：CORS error on same domain?

域、子域和端口需要相同，这基本上意味着除非您同时服务于 app 和 api 来自同一台服务器，您需要处理 CORS。这是无可避免的。

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

Is it possible to run webpack dev server and backend server on same hostname and port to avoid CORS?