React与IIS部署的.NET 8 API间CORS跨域问题求助

核心问题分析 #

从浏览器报错XHR OPTIONS https://myAuth0Domain.us.auth0.com/authorize?... CORS Missings Origin来看，当前的CORS拦截并非直接来自你的.NET API，而是Auth0授权接口的跨域请求问题，同时需要确认.NET API的CORS配置是否真正生效。

分步解决方案 #

1. 修正Auth0应用的CORS配置 #

Auth0的CORS配置有两个关键项，确保都正确配置：

• 允许Web源（Allowed Web Origins）：确认已添加http://localhost:5173和https://MyDomain.ca，注意地址完全匹配（包括端口、HTTP/HTTPS协议），无大小写或路径错误。
• 允许 Origins (CORS)：在Auth0应用的"Settings"页面找到此项，将http://localhost:5173和https://MyDomain.ca添加进去——这是控制Auth0接口（如/authorize）跨域访问的核心配置，之前可能遗漏了该项。

2. 确保.NET API的CORS配置生效 #

检查中间件顺序

UseCors的位置直接影响生效，必须放在UseRouting之后、UseAuthorization之前：

var builder = WebApplication.CreateBuilder(args);

// 现有服务配置...
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowSpecificOrigin", corsBuilder =>
            corsBuilder.WithOrigins("http://localhost:5173", 
                                    "https://MyDomain.ca")
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials());
});
builder.Services.AddHttpClient();

var app = builder.Build();

// 中间件顺序调整
app.UseRouting();
app.UseCors("AllowSpecificOrigin"); // 必须在UseAuthorization之前
app.UseAuthorization();

app.MapControllers();
app.Run();

排查IIS的CORS覆盖

如果IIS安装了CORS模块，它会覆盖.NET的CORS配置。可以通过以下方式禁用：

• 打开IIS管理器，找到你的API站点，移除CORS模块的配置；
• 或在站点的web.config中添加以下配置，确保.NET的CORS优先：

<system.webServer>
  <cors enabled="false" />
</system.webServer>

3. 前端请求配置修正 #

由于你的.NET API启用了AllowCredentials()，前端请求必须携带凭证：

• Axios示例：

axios.get('https://MyDomain.ca/API/your-endpoint', {
  withCredentials: true
});

• Fetch示例：

fetch('https://MyDomain.ca/API/your-endpoint', {
  credentials: 'include'
});

4. 调整Auth0登录方式 #

避免用XHR/fetch直接发起Auth0授权请求，改用Auth0 SDK的重定向登录方式，从根本上规避CORS问题：

// 使用Auth0 SDK的loginWithRedirect，而非loginWithPopup或自定义XHR
await auth0.loginWithRedirect({
  redirectUri: 'http://localhost:5173/api/auth/callback' // 与Auth0后台配置完全匹配
});

验证步骤 #

1. 重启.NET API和React应用；
2. 发起请求前打开浏览器开发者工具，查看Network面板中OPTIONS请求的响应头，确认Access-Control-Allow-Origin包含当前前端源；
3. 检查Auth0授权请求是否不再触发CORS错误。

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