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

Question

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

• localhost:3000 我的 ReactJS 应用程序 (Webpack)
• localhost:8081 我的后端服务器

现在这会导致错误，提示未发送 Access-Control-Origin-Header。

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

1. 弹出 Webpack 配置以访问开发服务器属性:

   npm 运行弹出

2. 在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 但我在网上找不到任何关于它的东西，只要我向它添加一些东西，它就会产生错误。

Answer 1

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

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

在某些情况下，这实际上只是运行时的开发问题，它们都在同一源上运行。大多数事情都会让你能够将代理调用到这个地方。例如，这里是 .NET SPA 服务/Angular 7 是如何做到的:

• Angular 运行时间:4200
• .NET 运行于 :5000

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

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

我不确定你在后端使用什么，所以如果你不使用 .NET，这里有一篇一般文章

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