Asp.Net Core API与集成Angular的Asp.Net Web应用CORS跨域问题求助

问题排查及修复方案 #

1. 修正Web API的CORS服务注册配置 #

你当前的CORS策略仅配置了允许的来源，缺少对请求方法、请求头的允许配置，POST请求对应的预检OPTIONS请求需要明确授权才能通过，修改ConfigureServices中的AddCors逻辑：

services.AddCors(options =>
{
    options.AddPolicy(name: MyAllowSpecificOrigins,
                      builder =>
                      {
                          builder.WithOrigins("http://localhost:39903")
                                 .AllowAnyHeader() // 允许所有请求头，也可按需指定业务需要的头字段
                                 .AllowAnyMethod(); // 允许所有HTTP方法，包含预检需要的OPTIONS、业务用的POST等
                                 // 如果需要跨域传递Cookie/凭证可以额外加.AllowCredentials()，无需求则忽略
                      });
});

2. 确认中间件顺序 #

你当前的中间件顺序是符合要求的，UseCors必须放在UseRouting之后、UseAuthorization之前，不要调整这个顺序，中间件顺序错误是CORS配置失效的常见原因。

3. 检查Controller/Action的CORS特性 #

确认HomeController或者CalculaEmprestimo接口上没有标注[DisableCors]特性，该特性会覆盖全局CORS策略导致配置失效。

4. 优化Angular请求代码 #

你手动定义的headers不需要额外设置，HttpClient会自动处理标准请求头，多余的自定义头可能会触发额外的预检规则，可直接删除headers定义，修改后代码如下：

postEmprestimo(pEmprestimo: IEmprestimo): Observable<IEmprestimoResult>
{
    const body = {
                    "parcelas": pEmprestimo.parcelas,
                    "valorParcelas": pEmprestimo.valorParcelas,
                    "valorEmprestimo": ""
                 };
    return this.http.post<IEmprestimoResult>('http://localhost:15741/api/Home/CalculaEmprestimo', body);
}

5. 临时验证方案 #

如果修改完成后仍然报错，可以先将策略临时改为允许所有来源验证问题根源：

builder.AllowAnyOrigin()
       .AllowAnyHeader()
       .AllowAnyMethod();

验证请求通了之后再改回指定的来源配置即可。

内容的提问来源于stack exchange，提问作者Leonardo Davinc Silva