在后端连接中反应应用程序 cors 错误答案

【问题标题】：react app cors error in backend connection在后端连接中反应应用程序 cors 错误
【发布时间】：2026-01-10 16:20:09
【问题描述】：

我遇到了 CORS 错误问题。

我正在使用 create-react-app 开发一个反应应用程序。

我正在使用 axios 从 BE 获取数据，但是当我尝试获取时，我在 chrome 中遇到了 cors 错误：

我尝试在 chrome 中禁用 CORS 策略，但没有任何效果。很奇怪，因为 login 路由有效，而其他需要 session 标头的路由无效。我还尝试通过命令行 CURL 调用它们，它们按预期工作。

使用 curl 命令行，我转储了响应标头，我得到了：

HTTP/1.1 200
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
Access-Control-Allow-Origin: *
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Pragma: no-cache
Expires: 0
X-Frame-Options: DENY
Content-Type: application/json
Transfer-Encoding: chunked
Date: Tue, 12 Oct 2021 13:22:07 GMT

我的前端在http://localhost:3000，而后端在互联网上的另一个域中。

我做错了什么？

【问题讨论】：

如果您使用的是 express.js，那么只需像 const cors=require("cors") 一样安装 cors 模块导入它并将 app.use(cors()) 添加到您的主服务器文件中
Chrome 出现 cors 错误。 错误信息是什么？预检请求是否成功？
我附加了 chrome 错误
@Wolfetto 控制台选项卡中一定有一些错误消息。这就是我们感兴趣的地方。
CORS header 'Access-Control-Allow-Origin' missing 在预检中

标签： reactjs axios cors

【解决方案1】：

我解决了启用（在 BE 部分）以下标头的问题：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: *

添加这些，预检调用成功，我能够获取 API

【讨论】：

【解决方案2】：

您可以代理后端或请求后端添加 CORS 标头，例如 Access-Control-Allow-Origin、Access-Control-Allow-Methods、 Access-Control-Allow-Headers

参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：

从命令行使用 curl 我转储 HEADER 服务器响应：HTTP/1.1 200 Vary: Origin Vary: Access-Control-Request-Method Vary: Access-Control-Request-Headers Access-Control-Allow-Origin: * X-Content-Type-Options: nosniff X-XSS-Protection: 1; mode=block Cache-Control: no-cache, no-store, max-age=0, must-revalidate Pragma: no-cache Expires: 0 X-Frame-Options: DENY Content-Type: application/json Transfer-Encoding: chunked Date: Tue, 12 Oct 2021 13:22:07 GMT
@Wolfetto 如果您的请求包含 Accept、Accept-Language、Content-Language、Content-Type 以外的标头，则您需要 Access-Control-Allow-Headers 标头。检查此列表：developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests
添加到 Tony Yip：我认为您需要在服务器设置中为预检请求添加这些 Access-Control-Allow-Headers。使用 nginx 有一个例子 dariuscoder.com/2021/09/16/how-to-debug-cors