我需要在使用 create-react-app 实用程序创建的 React 中使用 CORS 节点模块。
由于它是一个实用程序，我无法在内部进行调整并将 CORS 注入到预配置的 EXPRESS 模块中。
我们怎样才能做到这一点？
【问题讨论】：
标签： express cors create-react-app
如果你需要这个来进行开发，并且想从你的 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 服务器。
create-react-app 使用 webpack 开发服务器为您的 react 应用程序提供服务。
因此，如果您的 React 应用程序由 http://localhost:3000 提供服务，并且您要连接的 api 位于 http://localhost:8180/tables，您可以简单地将 proxy 值添加到您的 React 应用程序的 package.json 文件中，如下所示-
proxy: "http://localhost:8180",
然后从你的 react 应用调用你的 api
fetch('/tables').then(....)
请求将被发送到 create-react-app 服务器，该服务器会将其发送到 api 服务器并为您返回结果。
【讨论】：
更简单的解决方案是：
因为来自create-react-app 的服务器仅在development 期间使用，所以您可以在每个浏览器 上使用额外的扩展 来解决问题。以下是一些扩展，您可以在 development 阶段使用它们来解决 CORS 问题：
白名单功能可用于仅在指定网站中激活扩展程序。所以不用担心安全问题。
当然，在
production阶段，您可以在各自的服务器上解决CORS问题，所以在这个阶段，浏览器扩展 不再需要。
【讨论】：