.NET API启用CORS问题求助：React前端Fetch请求遭拦截

你的CORS错误主要来自三个核心问题：前端请求错误添加了服务器专属响应头、.NET的CORS政策配置不完整、中间件顺序可能不符合要求。以下是具体修复步骤：

1. 修正前端Fetch请求代码 #

前端请求中不需要携带Access-Control-Allow-Origin和Access-Control-Allow-Credentials——这两个是服务器返回给前端的响应头，客户端发送它们会触发额外的预检请求，反而导致跨域失败。修改后的代码：

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
    "userText": e.target.value
});

var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
    redirect: 'follow',
};

fetch("https://localhost:7101/api/Game/UserText", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));

2. 完善.NET的CORS配置 #

更新Program.cs中的CORS政策，确保允许必要的请求头、方法，同时严格控制中间件顺序（UseCors必须放在UseRouting之后、UseAuthorization之前）：

var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

builder.Services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      policy =>
                      {
                          // 推荐指定具体前端Origin，比通配符*更安全
                          policy.WithOrigins("http://localhost:3000")
                                .AllowAnyHeader() // 允许所有请求头（包括Content-Type）
                                .AllowAnyMethod(); // 允许所有HTTP方法（含OPTIONS预检请求）
                          
                          // 若必须允许所有Origin，用以下配置（注意：不能与AllowCredentials同时使用）
                          // policy.AllowAnyOrigin()
                          //       .AllowAnyHeader()
                          //       .AllowAnyMethod();
                      });
});

// 中间件顺序必须严格遵循：Routing → Cors → Authorization → Controllers
app.UseRouting();

app.UseCors(MyAllowSpecificOrigins);

app.UseAuthorization();

app.MapControllers();

app.Run();

3. 验证控制器路由正确性 #

确保GameController类上的路由特性与方法路由组合后，和前端请求地址完全匹配：

[Route("api/[controller]")]
[ApiController]
public class GameController : ControllerBase
{
    [HttpPost]
    [Route("UserText")]
    public IActionResult GetUserText([FromBody] UserText userText)
    {
        Console.WriteLine(userText.userText);
        return Ok();
    }
}

4. 最终验证步骤 #

• 重启.NET后端服务和React前端服务，确保配置修改生效
• 禁用Chrome的CORS扩展（扩展可能干扰正常的CORS校验逻辑）
• 检查.NET项目launchSettings.json中的applicationUrl是否为https://localhost:7101

内容的提问来源于stack exchange，提问作者Venoz