SolidJS经Ocelot网关请求ASP.NET WebAPI遇CORS跨域问题求助

浏览器的CORS校验是针对直接交互的服务器（也就是你的Ocelot网关https://localhost:6331），而非后端WebAPI。你现在只在WebAPI里配置了CORS头，但网关没有把这些头透传给前端，也没有自己返回符合要求的CORS响应头，所以浏览器会报错。

另外你WebAPI的CORS配置只处理了OPTIONS请求的响应头，实际POST请求的响应里并没有添加Access-Control-Allow-Origin，这也会导致后续请求失败。

方案1：在Ocelot网关中配置CORS（推荐） #

既然前端直接和网关通信，最优方案是在网关层配置CORS，这样所有经过网关的请求都能统一处理跨域：

1. 在网关的ASP.NET Core项目的Program.cs中添加CORS服务并启用：

var builder = WebApplication.CreateBuilder(args);

// 添加CORS服务，配置允许的源、方法和头
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowLocalFrontend", policy =>
    {
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 如果需要携带Cookie/凭证的话添加
    });
});

// 添加Ocelot服务
builder.Services.AddOcelot(builder.Configuration);

var app = builder.Build();

// 必须在UseOcelot之前启用CORS中间件
app.UseCors("AllowLocalFrontend");

await app.UseOcelot();

app.Run();

2. 移除WebAPI中手动写的OPTIONS端点配置，改用官方CORS中间件（避免重复配置，且更可靠）：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowGateway", policy =>
    {
        policy.WithOrigins("https://localhost:6331") // 允许网关的请求
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

var app = builder.Build();

app.UseCors("AllowGateway");

// 你的API路由配置
app.MapPost("/api/v1/what/ever", (HttpContext context) =>
{
    // 业务逻辑
    return Results.Ok();
});

app.Run();

方案2：让Ocelot透传WebAPI的CORS响应头 #

如果不想在网关单独配置CORS，可以修改Ocelot的路由配置，强制透传WebAPI返回的CORS头：

{
   "GlobalConfiguration": {
      "BaseUrl": "https://localhost:6331"
   },
   "Routes": [
       {
           "DownstreamPathTemplate": "/api/v1/what/ever",
           "DownstreamScheme": "http",
           "DownstreamHostAndPorts": [
               {
                   "Host": "host.docker.internal",
                   "Port": "1339"
                }
           ],
           "UpstreamPathTemplate": "/what/ever",
           "UpstreamHttpMethod": [ "POST", "OPTIONS" ],
           "AddHeadersToResponse": {
               "Access-Control-Allow-Origin": "http://localhost:3000",
               "Access-Control-Allow-Methods": "OPTIONS, POST",
               "Access-Control-Allow-Headers": "Content-Type",
               "Access-Control-Max-Age": "86400"
           }
       }
   ]
}

同时记得修改WebAPI的配置，让POST请求的响应也带上Access-Control-Allow-Origin头（用官方CORS中间件即可实现）。

• 浏览器的CORS校验只认直接请求的服务器返回的头，所以网关必须参与CORS处理。
• 手动写OPTIONS端点容易遗漏场景（比如不同路由的OPTIONS请求），官方CORS中间件会自动处理预检请求和实际请求的响应头，更可靠。

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