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

问题描述

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

标签： javascripthtmlreactjswebpackcreate-react-app

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

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

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

角度运行：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

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

问题描述

解决方案

推荐阅读