Ember.js SPA调用.NET服务时AXIOS无法获取401响应问题排查

核心问题 #

当SessionId过期时，.NET中间件返回401状态码，但Axios的error.response未定义，无法通过拦截器捕获401状态来触发登录重定向。这通常是因为401响应未包含正确的CORS头部，被浏览器同源策略拦截，导致Axios无法拿到完整响应对象。

原因分析 #

.NET的CORS中间件默认在请求管道较后位置执行，如果你的SessionId检查中间件在CORS中间件之前返回401，响应会缺失CORS允许的头部，浏览器会拦截该响应，Axios只能拿到无response属性的错误对象。

解决方案 #

1. 调整中间件执行顺序 #

确保CORS中间件在SessionId检查中间件之前执行，这样即使返回401，响应也会带上正确的CORS头部。

在.NET 6+的Program.cs中调整顺序：

var app = builder.Build();

// 先启用CORS中间件
app.UseCors(CorsDefaultPolicy);

// 再添加SessionId检查中间件
app.UseMiddleware<SessionValidationMiddleware>();

// 后续中间件
app.UseAuthorization();
app.MapControllers();

2. 手动为401响应添加CORS头部 #

若调整顺序后仍有问题，可在Session检查中间件中返回401时，显式添加CORS头部：

public class SessionValidationMiddleware
{
    private readonly RequestDelegate _next;
    private readonly IConfiguration _config;

    public SessionValidationMiddleware(RequestDelegate next, IConfiguration config)
    {
        _next = next;
        _config = config;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        var sessionId = context.Request.Headers["SessionId"].FirstOrDefault();
        if (string.IsNullOrEmpty(sessionId) || IsSessionExpired(sessionId))
        {
            // 手动添加CORS头部
            var origin = context.Request.Headers["Origin"].FirstOrDefault();
            if (!string.IsNullOrEmpty(origin) && IsAllowedOrigin(origin))
            {
                context.Response.Headers.Add("Access-Control-Allow-Origin", origin);
                context.Response.Headers.Add("Access-Control-Allow-Credentials", "true");
            }
            
            context.Response.StatusCode = StatusCodes.Status401Unauthorized;
            return;
        }

        await _next(context);
    }

    private bool IsSessionExpired(string sessionId)
    {
        // 你的Session过期检查逻辑
        return true;
    }

    private bool IsAllowedOrigin(string origin)
    {
        var allowedOrigins = _config.GetSection("AllowedOrigins").Get<string[]>();
        return allowedOrigins.Contains(origin);
    }
}

3. 优化Axios拦截器错误处理 #

增强拦截器逻辑，覆盖网络错误等场景：

this._axios.interceptors.response.use(
    (response) => response,
    (error) => {
        // 处理无响应的网络错误
        if (!error.response) {
            console.error("请求失败或响应被拦截");
            window.location.href = "/login";
            return Promise.reject(error);
        }
        
        // 捕获401状态
        if (error.response.status === 401) {
            window.location.href = "/login";
        }
        
        return Promise.reject(error);
    }
);

验证步骤 #

1. 触发Session过期场景，打开浏览器开发者工具网络标签
2. 查看401请求的响应头，确认包含Access-Control-Allow-Origin和Access-Control-Allow-Credentials
3. 检查Axios拦截器是否能正确读取error.response.status

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