Question

我需要在使用create-react-app utility创建的React中使用'CORS'节点模块。

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

我们如何实现这一目标？

Answer 1

如果你需要这个用于开发并希望从你的反应应用程序访问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服务器。

create-react-app使用webpack开发服务器为您的反应应用程序提供服务。

因此，如果您的反馈应用程序是从http://localhost:3000提供的，并且您要连接的API位于http://localhost:8180/tables，则只需在您的反应应用程序的package.json中添加proxy值即可像这样的文件 -

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

然后从你的反应应用程序调用你的api

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

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

此处详细信息Proxying API Requests in Development

Answer 2

SIMPLER解决方案是：

由于create-react-app中的服务器仅在development期间使用，因此您可以在每个浏览器上使用其他扩展名来解决此问题。以下是一些扩展，可用于在development阶段解决 CORS 问题：

当然，在production阶段，您可以在各自的服务器上解决 CORS 问题，因此，在这个阶段，是 browser扩展< / em>不再需要。

在create-react-app中启用CORS

2 个答案: