在创建React应用程序实用程序中启用CORS

Question

我需要在React中使用CORS节点模块，React是使用create-React-app实用程序创建的。

由于它是一个实用程序，我不能调整内部并将CORS注入预配置的EXPRESS模块。

我们如何才能做到这一点？

Answer 1

更简单的解决方案是：

由于create react app中的服务器仅在开发过程中使用，因此您可以在每个浏览器上使用其他扩展来解决此问题。以下是一些扩展，您可以在开发阶段使用它们来解决CORS问题：

• Chrome的扩展功能
• Firefox扩展
• 歌剧院扩建

只有在指定的网站中才可以使用白名单功能激活扩展。所以不要担心安全问题。

当然，在生产阶段，您可以在各自的服务器上解决CORS问题，因此在此阶段，不再需要浏览器扩展。

Answer 2

如果您在开发过程中需要此功能，并且希望从react应用程序访问api，但遇到类似这样的错误-

Failed to load http://localhost:8180/tables: 
The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8180'
that is not equal to the supplied origin. Origin 'http://localhost:3000' is
therefore not allowed access. Have the server send the header with a valid
value, or, if an opaque response serves your needs, set the request's mode to
'no-cors' to fetch the resource with CORS disabled.

然后，您可以让create-react-app服务器非常容易地将您的请求代理到api服务器。

创建react应用程序使用网页包开发服务器为您的react应用程序提供服务。

因此，如果你的反应应用程序是从http://localhost:3000提供的，并且你想要连接的api位于http://localhost:8180/tables，你可以简单地将代理值添加到你的反应应用程序的package.json这样的档案-

proxy: "http://localhost:8180",

然后从react应用程序调用api，如

fetch('/tables').then(....)

该请求将被发送到create-react-app服务器，该服务器将把它发送到api服务器并为您返回结果。

此处提供了代理开发中的API请求的完整详细信息