Angular调用.NET 8 Web API登录接口遇CORS Header缺失跨域错误

错误信息 #

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header missing)

已排查情况 #

• Postman请求接口正常
• 已禁用Firefox增强跟踪保护
• Angular对接其他API无跨域问题
• Web API对接其他前端仍报相同CORS错误
• 已安装CORS相关NuGet包

问题根源及修复步骤 #

1. 匹配CORS Origin与Angular运行地址 #

检查Angular实际运行的协议（HTTP/HTTPS）和端口，确保.NET的CORS配置完全匹配：

• 若Angular运行在https://localhost:4200，修改CORS配置：

  policy.WithOrigins("https://localhost:4200");
  

• 不确定协议时，可同时允许HTTP和HTTPS地址：

  policy.WithOrigins("http://localhost:4200", "https://localhost:4200");
  

2. 修正中间件顺序 #

.NET 8中UseCors必须放在正确的管道位置，确保代码顺序如下：

app.UseHttpsRedirection();
app.UseRouting();
app.UseCors(clientsCORSPolicy); // 必须在UseRouting之后、UseAuthentication之前
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();

3. 确保错误响应携带CORS头 #

当API返回401、500等错误状态码时，CORS头可能未自动添加，可在控制器异常块中手动补充：

catch (Exception ex)
{
    logger.LogError(ex, $"something went wrong {nameof(Login)}: ");
    Response.Headers.Append("Access-Control-Allow-Origin", "http://localhost:4200");
    return StatusCode(500, $"Internal server Error");
}

4. 验证API地址准确性 #

检查Angular environment.ts中的apiUrl是否与.NET API实际运行地址一致，可通过.NET启动控制台输出或launchSettings.json确认端口。

5. 测试移除自定义请求头 #

暂时去掉Angular中的No-Auth头，验证请求是否正常：

public login(loginData: any) {
    console.log('LOGIN-SERVICE:', loginData)
    return this.httpclient.post(this.API_PATH + 'login', loginData);
}

若恢复正常，可在CORS策略中显式允许该头：

policy.WithHeaders("No-Auth");

验证修复 #

重启.NET API和Angular应用，重新发起登录请求，查看浏览器网络面板的响应头是否包含Access-Control-Allow-Origin，同时确认控制台无CORS错误。

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