如何解决Okta/React/.NET跨域预请求（CORS Preflight）错误？

以下是针对你的问题的具体排查和解决步骤：

1. 修正ASP.NET Core的CORS中间件顺序 #

CORS中间件的注册顺序直接决定了响应头是否能正确添加，必须在认证/授权中间件之前启用。在Program.cs中按以下顺序配置：

var builder = WebApplication.CreateBuilder(args);

// 先添加CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp", policy =>
    {
        policy.WithOrigins("https://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 必须开启，Okta认证需要传递凭证
    });
});

// 再添加Okta认证服务
builder.Services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = OktaDefaults.ApiAuthenticationScheme;
    options.DefaultChallengeScheme = OktaDefaults.ApiAuthenticationScheme;
})
.AddOktaWebApi(builder.Configuration.GetSection("Okta"));

var app = builder.Build();

// 先启用CORS
app.UseCors("AllowReactApp");

// 再启用认证和授权
app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

app.Run();

注意：UseCors必须放在UseAuthentication、UseAuthorization和MapControllers之前，否则预请求和实际请求都无法获取到CORS响应头。

2. 核对Okta旧版平台的配置细节 #

• 可信源（Trusted Origins）：确保https://localhost:3000的类型同时勾选CORS和Redirect，只选一个会导致跨域或回调失败。
• 登录回调URI（Sign-in redirect URIs）：确认https://localhost:3000/login/callback完全匹配，包括HTTPS协议、端口和路径，没有拼写错误。

3. 调整React端的请求配置 #

React发起请求时必须携带凭证，否则Okta的认证会话无法正常传递。使用fetch时添加credentials: 'include'：

fetch('/api/your-protected-endpoint', {
    method: 'GET',
    credentials: 'include',
    headers: {
        'Content-Type': 'application/json'
    }
})

如果使用Okta React SDK，检查OktaAuth配置的issuer、clientId、redirectUri是否和后端及Okta平台完全一致，避免HTTP/HTTPS混合使用。

4. 排查HTTPS证书干扰 #

本地开发时，自签名证书可能被浏览器拦截，看似是CORS错误，实际是证书信任问题：

• 临时切换React和ASP.NET Core为HTTP模式（React设置HTTPS=false，ASP.NET Core修改启动端口为HTTP），测试是否还会出现CORS错误。
• 如果切换后正常，再处理HTTPS证书信任问题：将ASP.NET Core的开发证书导入浏览器信任列表，或在React项目中设置环境变量NODE_TLS_REJECT_UNAUTHORIZED=0（仅开发环境使用）。

5. 检查OPTIONS预请求处理 #

有些自定义中间件或路由配置会拦截OPTIONS预请求，导致CORS中间件无法处理。可以添加日志确认OPTIONS请求是否到达CORS中间件：

app.Use(async (context, next) =>
{
    if (context.Request.Method == "OPTIONS")
    {
        Console.WriteLine("收到OPTIONS预请求");
    }
    await next();
});

如果日志未输出，检查是否有其他中间件（如异常处理、路由）在UseCors之前拦截了请求。

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