如何在 create-react-app 中激活 CORS？

Posted 2023-02-22

【中文标题】如何在 create-react-app 中激活 CORS？

【英文标题】：How can I activate CORS in create-react-app?

【发布时间】：2019-06-17 09:35:46

【问题描述】：

我已经使用 create-react-app cli 创建了一个 React 应用程序。现在我使用外部库做一些请求。 （我将库传递给我的 backendUrl 并执行请求）

localhost:3000我的 ReactJS 应用程序（Webpack） localhost:8081我的后台服务器

现在这会导致错误，说没有发送 Access-Control-Origin-Header。

所以我研究了如何使用 Webpack 激活它。我做了什么：

弹出 Webpack 配置以访问开发服务器属性：

npm run eject

在 webpack.config.js 中添加以下部分

devServer: 
headers: 
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers":
    "Origin, X-Requested-With, Content-Type, Accept"

--> 什么都没做

然后我尝试使用代理机制：

"proxy": 
  "/api": 
    "target": "<put ip address>",
    "changeOrigin" : true
  

但是由于我使用了一个不使用 fetch 并使用整个 URL 进行 API 调用的外部库，所以这也不起作用，因为据我了解，这仅代理请求，例如 fetch("api/items")。

我有点困惑，因为我在网上找不到任何东西。也许我把上面的东西放在错误的配置文件或行中？

还有一个 webpackDevServer.config.js 但是我在网上找不到任何关于它的东西，只要我添加一些东西，它就会产生错误。

【问题讨论】：

您是否尝试过类似这样的代理："proxy": "127.0.0.1:8081"

在开发过程中，如果您使用create-react-app，则不需要弹出来启用开发代理。它是有效内置的，可以作为单行添加到package.json 而不会基于docs 弹出。正如答案所示，这只会解决开发中的问题，并且需要在服务器上启用 CORS 才能进行生产。

我创建了一个新项目并将其添加到 package.json 中。但是代理被忽略了。正如我所说，可能是由于缺少相对路径的提取。有什么要说的 --> 代理所有对“localhost:8081”的http请求到代理？

我们如何在 react-rewired 上添加 cors

【参考方案1】：

CORS 需要在服务器端打开，而不是在客户端。您可以下载 chrome 扩展程序以绕过 CORS，但这仅用于开发目的。

您获得 CORS 的原因是因为您从 3000 跳转到 8181，这是两个不同的来源。根据您在后端使用的内容，有多种不同的方法可以启用 CORS。

在某些情况下，这实际上只是一个开发问题，因为在运行时，它们都在同一个源上运行。大多数事情将使您能够代理呼叫到该地点。例如，下面是 .NET SPA Services / Angular 7 的做法：

Angular 在 :4200 上运行 .NET 在 :5000 上运行

spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

https://docs.microsoft.com/en-us/aspnet/core/client-side/spa-services?view=aspnetcore-2.2

我不确定您在后端使用的是什么，所以如果您不使用 .NET，这里是一篇通用文章

https://enable-cors.org/server.html

【讨论】：

好答案。我可以使用以下说明在 CRA 中解决此问题：create-react-app.dev/docs/proxying-api-requests-in-development 在开发工作时，由于本地 React 应用程序可能指向真正的后端 API，您能看到禁用 CORS 的任何安全原因吗？

对于拥有该服务器的人来说，这更像是一个问题。在您的场景中，我认为您永远不应该在本地工作时反对生产资源。特别是如果它们是非 GET 操作（POST、PUT、DELETE 等）。您应该为此目的建立资源的开发实例，以便可以对其进行调整以进行本地开发访问。但是，这可能根本不是问题，具体取决于您的后端服务在做什么。