Question

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

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

现在这将导致错误，表明未发送Access-Control-Origin-Header。

因此，我研究了如何使用Webpack激活它。我所做的：

弹出Webpack Config可以通过以下方式访问开发服务器属性：

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
  }
}

但是由于我使用的是外部库，该库不使用访存功能，而是使用整个URL进行API调用，所以这也不起作用，因为据我了解，这仅代理fetch("api/items")之类的请求。

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

也有一个webpackDevServer.config.js，但是我在网上找不到任何内容，一旦添加内容，它就会产生错误。

Answer 1

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

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

1 个答案: