Angular应用调用受保护Web API出现CORS及401未授权错误如何处理

CORS跨域报错修复 #

你碰到的CORS报错是后端ASP.NET Core未配置跨域策略导致的，按以下步骤配置即可：

• 在Program.cs文件中先注册CORS服务，注意服务注册顺序要在身份验证、授权服务之前：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngularDev", policy =>
    {
        policy.WithOrigins("http://localhost:4200")
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials();
    });
});

• 中间件管道配置时，要把UseCors("AllowAngularDev")放在UseRouting之后，UseAuthentication和UseAuthorization之前，顺序错误会导致配置不生效。

Authorization头缺失修复 #

正常登录Azure AD但请求不带Authorization头，是MSAL拦截器配置错误导致的：

• 确认Angular项目中已经正确注册了MSAL HTTP拦截器，且拦截器配置的受保护资源列表包含了你后端API的地址前缀。
• 确认你调用API前申请登录权限时，参数里包含了你自定义暴露的API scope，仅申请登录相关的OpenID、Profile等scope无法获取到访问API所需的令牌，拦截器自然不会附加请求头。

401未授权问题排查 #

你没有单独创建API应用注册的操作符合单应用集成场景规范，不需要额外新增应用注册，只要确保自定义scope是在当前SPA的应用注册下创建即可。如果完成以上两步后还返回401，按以下顺序排查：

• 检查后端Azure AD配置的Audience参数，值必须和你应用注册中「暴露API」板块填写的应用ID URI一致，通常格式为api://<你的应用客户端ID>。
• 确认应用注册中你创建的自定义scope已经启用，且前端申请权限时已经正确添加了该scope，没有拼写错误。
• 可以先复制前端获取到的访问令牌，用Postman携带该令牌调用API接口，先排除后端配置错误的可能性。

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