ASP.NET Core 6自定义认证处理器与Angular拦截器：401状态码为0及CORS问题

问题回顾 #

1. Angular的HttpInterceptor无法接收到.NET Core自定义认证返回的401状态码，仅能获取到状态码0；
2. 已认证用户请求正常无CORS问题，但未授权的401响应触发CORS错误（已在API端配置CORS策略）；
3. Postman调用API时状态码和头信息正常，仅Angular端出现异常。

核心原因 #

当自定义认证处理器提前返回401响应时，ASP.NET Core的CORS中间件可能未被执行，导致响应缺失跨域所需的头信息，浏览器拦截响应后，Angular无法获取真实状态码，只能拿到状态码0。

解决方案 #

一、修复CORS问题（解决未授权响应的跨域错误） #

1. 调整中间件注册顺序

确保UseCors中间件在认证、授权中间件之前执行，这样即使认证失败返回401，CORS头也能被正确添加到响应中。

Program.cs示例代码：

var builder = WebApplication.CreateBuilder(args);

// 配置CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular", policy =>
    {
        policy.WithOrigins("http://localhost:4200") // 替换为你的Angular应用地址
              .AllowAnyHeader()
              .AllowAnyMethod()
              .AllowCredentials(); // 若请求携带Cookie/认证头，必须开启此项
    });
});

// 注册自定义认证服务
builder.Services.AddAuthentication("CustomAuthScheme")
    .AddScheme<CustomAuthOptions, CustomAuthHandler>("CustomAuthScheme", _ => { });

var app = builder.Build();

// 中间件顺序必须严格遵循：CORS → 认证 → 授权
app.UseCors("AllowAngular");
app.UseAuthentication();
app.UseAuthorization();

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

2. 自定义认证处理器中手动添加CORS头（兜底方案）

若调整中间件顺序后仍有问题，可在处理器返回401时手动添加跨域头，确保浏览器能正常接收响应：

protected override async Task<AuthenticateResult> HandleAuthenticateAsync()
{
    // 认证逻辑判断
    if (!IsUserAuthenticated())
    {
        var response = Context.Response;
        response.StatusCode = StatusCodes.Status401Unauthorized;
        // 添加CORS头，需与API配置的Origin一致
        response.Headers.Add("Access-Control-Allow-Origin", "http://localhost:4200");
        response.Headers.Add("Access-Control-Allow-Credentials", "true");
        
        return AuthenticateResult.Fail("未授权访问");
    }

    // 认证成功逻辑
    var principal = CreateAuthenticatedPrincipal();
    return AuthenticateResult.Success(new AuthenticationTicket(principal, "CustomAuthScheme"));
}

二、让Angular拦截器正确接收401状态码 #

解决CORS问题后，浏览器不再拦截响应，Angular就能获取真实的401状态码。确保拦截器正确处理错误响应：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, catchError, throwError } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 若请求需携带认证信息，统一开启withCredentials
    const authRequest = request.clone({ withCredentials: true });

    return next.handle(authRequest).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // 执行未授权逻辑，比如跳转登录页、提示用户
          console.log('用户未授权，请重新登录');
        }
        return throwError(() => error);
      })
    );
  }
}

额外排查点 #

• 确认CORS策略配置的Origin与Angular应用地址完全一致（包括端口号，如http://localhost:4200不能省略端口）；
• 查看浏览器Network面板，检查401响应的头信息是否包含Access-Control-Allow-Origin；
• 避免在自定义认证处理器中直接终止响应（如调用Context.Response.WriteAsync），应通过AuthenticateResult.Fail()让框架处理响应流程。

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