将React构建文件放入wwwroot后出现CORS错误问题咨询

1. 调整API的CORS策略配置 #

确保CORS策略不仅覆盖前端实际访问的域名/端口，还要包含Azure AD登录域名——认证流程中会涉及该域名的跨域请求，必须显式允许。

在Program.cs中修改CORS配置：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AuthAllowed", policy =>
    {
        policy.WithOrigins("https://your-deploy-domain.com", "http://localhost:3000") // 替换为你的前端实际地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials()
              .WithExposedHeaders("WWW-Authenticate"); // 暴露认证相关响应头
        // 添加Azure AD登录域名，覆盖不同区域的登录节点
        policy.WithOrigins("https://login.microsoftonline.com", "https://login.microsoft.com");
    });
});

// 注意中间件顺序：先启用认证，再启用CORS
app.UseAuthentication();
app.UseAuthorization();
app.UseCors("AuthAllowed");

2. 检查Azure AD应用注册配置 #

• 确认**回复URL（Redirect URIs）**包含API的实际地址，比如部署后填https://your-api-domain.com/signin-oidc，本地开发填http://localhost:5000/signin-oidc。
• 核对API权限：确保已添加正确的委派权限，且必要时完成管理员同意授权。

3. 规范React前端的认证请求逻辑 #

如果前端使用MSAL类库处理认证，需避免直接通过AJAX触发未携带Token的API请求：

• 先通过MSAL获取Access Token，再在API请求的Authorization Header中携带Bearer {token}。
• 保证前端配置的authority与API的Azure AD配置一致，比如统一使用https://login.microsoftonline.com/your-tenant-id。

4. 确认API中间件顺序 #

确保静态文件托管在CORS之后，避免静态资源请求绕过CORS策略：

// 先启用CORS，再托管wwwroot中的React静态文件
app.UseCors("AuthAllowed");
app.UseStaticFiles();

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

5. 排查浏览器请求细节 #

打开浏览器开发者工具的Network标签：

• 定位触发CORS错误的请求，检查请求Origin与响应头Access-Control-Allow-Origin是否匹配。
• 查看认证跳转过程中的请求头，确认无配置缺失。

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