是否可以在同一主机名和端口上运行webpack dev服务器和后端服务器以避免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 dev服务器正在服务于前端：

app.example.com:8080

再次，当我尝试访问端口80上的API时，我遇到了CORS： - （

帮助！我怎样才能设置它，所以我不必处理CORS而能够使用Webpack dev服务器和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函数，以便在将请求传递给后端之前对路径进行一些处理。

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

上的webpack-dev-server文档

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

Answer 2

相关答案：CORS error on same domain?

域名，子域名和端口需要相同，这基本上意味着除非您从同一台服务器同时提供 app 和 api ，否则需要注意CORS没有逃脱。

您的webpack开发环境只能帮助您使用vue.js应用。它不能做服务器方面的事情。您需要在不同的端口上使用您的服务器。因此，您必须为所有API请求设置app.config。

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