React使用Fetch/Axios调用API遭遇CORS跨域错误求助

这绝对是服务器端的CORS配置问题，和你的前端JavaScript代码无关——先给你吃个定心丸，你的Fetch/Axios写法完全没问题。

为什么Postman能调用，前端却不行？ #

Postman这类API调试工具不会触发浏览器的跨域资源共享（CORS）安全检查，它直接发送请求并接收响应。但浏览器出于安全考虑，会对跨域请求（比如你的React前端http://localhost:3000请求后端http://10.1.1.35）做额外验证：

1. 首先发送一个OPTIONS预请求，询问后端是否允许当前源的请求
2. 如果后端没有返回正确的CORS响应头（比如Access-Control-Allow-Origin），浏览器就会拦截响应，抛出你看到的错误

你的报错信息已经明确指向了核心问题：

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

至于你测试公共API也报错，大概率是写错了地址（那个API的正确地址是HTTPS协议的https://gturnquist-quoters.cfapps.io/api/random，用HTTP请求会触发重定向，进而导致CORS问题），但这和你自己的后端问题无关。

.NET后端的CORS正确配置方案 #

针对你的场景，我给你提供.NET（以.NET 6+为例）的具体配置步骤，确保能彻底解决问题：

1. 先安装CORS包（如果未安装）：
   在NuGet包管理器中安装Microsoft.AspNetCore.Cors，或使用命令行：

   dotnet add package Microsoft.AspNetCore.Cors
   

2. 在Program.cs中配置CORS策略：
   定义一个允许你的React前端访问的策略，包含必要的请求头和方法：

   var builder = WebApplication.CreateBuilder(args);
   
   // 添加CORS服务并定义专属策略
   builder.Services.AddCors(options =>
   {
       options.AddPolicy("AllowReactFrontend", policy =>
       {
           // 允许你的React前端地址（多地址可传入数组）
           policy.WithOrigins("http://localhost:3000")
                 // 允许所有HTTP方法（包括OPTIONS预请求）
                 .AllowAnyMethod()
                 // 允许你请求中携带的自定义头和Content-Type
                 .AllowHeaders("id-tenant", "Content-Type")
                 // 如果请求需要携带Cookie等凭证，就保留这行；不需要可删除
                 .AllowCredentials();
       });
   });
   
   // 添加控制器服务
   builder.Services.AddControllers();
   
   var app = builder.Build();
   
   // 关键：CORS中间件必须放在UseRouting之后、UseAuthorization之前
   app.UseCors("AllowReactFrontend");
   
   app.UseRouting();
   app.UseAuthorization();
   
   app.MapControllers();
   
   app.Run();
   

3. 排查之前配置失效的常见原因：

   • 中间件顺序错误：CORS中间件必须在路由和授权中间件之前启用，否则不会生效
   • 策略未包含自定义头：之前的配置可能没添加id-tenant这个自定义请求头，导致预请求被拒绝
   • 源配置冲突：如果用了通配符*允许所有源，同时又开启了AllowCredentials()，这是浏览器禁止的行为，必须指定具体的前端源

验证配置是否生效 #

重启后端服务后，用前端发起请求：
打开浏览器开发者工具的Network标签，查看OPTIONS请求的响应头，确认是否包含：

• Access-Control-Allow-Origin: http://localhost:3000
• Access-Control-Allow-Headers: id-tenant,Content-Type
• Access-Control-Allow-Methods: GET,OPTIONS

只要这些头正确返回，你的Fetch/Axios请求就能正常工作了。

内容的提问来源于stack exchange，提问作者Carlos Adriano Miranda