如何为使用CORS的create-react-app构建的React应用程序将localhost：3000更改为“ custom.domain.dev”

Question

在使用localhost：3000时，尝试让我的React应用程序将发布请求发送到api端点时，我遇到了CORS问题。

如何将我的应用配置为使用custom.domain.dev而不是localhost：3000？

我设置了/etc/hosts以包含127.0.0.1 custom.domain.dev，并且我的.env文件包含了HOST=custom.domain.dev。

如this stackoverflow问题

所述

Chrome浏览器不支持CORS请求的本地主机（2010年打开了一个错误，于2014年标记为WontFix）。

Answer 1

我认为问题有两个部分-

关于本地主机上的CORS标志

当从域/端口向整个新域/端口发出请求时，浏览器会发出

CORS标志。如果要进行测试，则可以通过添加--disable-web-security标志来禁用chrome中的此安全标志。只需创建chrome到桌面的快捷方式>右键单击>属性>在快捷方式选项卡中-目标>将--disable-web-security --user-data-dir =“ C：\ tmpChromeSession”附加到目标即可。这将禁用CORS检查。

在实际情况下，如果您在api服务器上具有访问/控制权，那么您应该做的是通过向响应添加必要的响应标头（Access-Control-Allow-Origin）在服务器上启用CORS。如果您没有访问权限，则一种选择是通过CORS代理路由请求。

更改端口

您可以在package.json See this Stack Overflow answer上更改react应用的运行端口。如果您在计算机上运行该应用程序，则您将陷入localhost。