Web API超时后AJAX请求返回登录URL异常的处理方案咨询

这个场景在使用表单认证或类似会话式身份验证的Web API中非常常见，我之前做项目时也踩过这个坑。核心问题在于：服务器会话超时后，身份验证中间件默认会返回302重定向到登录页，但AJAX请求（XMLHttpRequest/fetch）会自动跟随这个重定向，导致你拿到的是登录页的响应（而非原始的302响应），所以既看不到Location头，还可能因为登录页是HTML格式，和你期望的API响应格式不匹配，出现“空响应”的错觉。

下面是具体的解决步骤：

1. 修改服务器端配置：让AJAX请求返回401而非302重定向 #

你需要在服务器端的身份验证配置中，判断当前请求是否为AJAX请求，若是则返回401 Unauthorized状态码，而非重定向。这样客户端就能直接捕获到明确的错误状态，无需处理重定向逻辑。

以ASP.NET Core为例，在Program.cs（或Startup.cs）中配置Cookie认证的事件：

builder.Services.ConfigureApplicationCookie(options =>
{
    // 拦截登录重定向事件
    options.Events.OnRedirectToLogin = context =>
    {
        // 检查请求头是否包含AJAX标识
        if (context.Request.Headers.ContainsKey("X-Requested-With") &&
            context.Request.Headers["X-Requested-With"] == "XMLHttpRequest")
        {
            // 对AJAX请求返回401，而非重定向
            context.Response.StatusCode = StatusCodes.Status401Unauthorized;
            return Task.CompletedTask;
        }
        // 非AJAX请求正常重定向到登录页
        context.Response.Redirect(context.RedirectUri);
        return Task.CompletedTask;
    };
});

其他后端框架的思路类似：识别AJAX请求（通常通过X-Requested-With: XMLHttpRequest头），返回401状态码。

2. 客户端统一拦截401状态，处理登录逻辑 #

在客户端的AJAX请求中，统一添加拦截器，捕获401状态码，然后跳转到登录页或弹出登录模态框。

示例1：jQuery 全局配置 #

// 全局AJAX完成回调
$.ajaxSetup({
    complete: function(xhr) {
        if (xhr.status === 401) {
            // 跳转到登录页，这里替换成你的登录URL
            window.location.href = '/Account/Login';
        }
    }
});

示例2：Fetch API 封装 #

async function apiRequest(url, options = {}) {
    // 手动添加AJAX标识头
    options.headers = {
        ...options.headers,
        'X-Requested-With': 'XMLHttpRequest'
    };

    const response = await fetch(url, options);
    
    if (response.status === 401) {
        // 处理登录跳转
        window.location.href = '/Account/Login';
        return Promise.reject(new Error('会话超时，请重新登录'));
    }

    if (!response.ok) {
        throw new Error(`请求失败: ${response.statusText}`);
    }

    return await response.json();
}

// 使用示例
apiRequest('/api/data')
    .then(data => console.log(data))
    .catch(err => console.error(err));

示例3：Axios 拦截器 #

axios.interceptors.response.use(
    response => response,
    error => {
        if (error.response?.status === 401) {
            window.location.href = '/Account/Login';
        }
        return Promise.reject(error);
    }
);

3. 为什么之前捕获Location头失败？ #

因为浏览器会自动处理3xx系列的重定向响应：当服务器返回302时，浏览器会直接向Location头中的URL发起新请求，你在客户端代码中拿到的是重定向后的响应（即登录页的响应），而非原始的302响应，所以自然看不到Location头。通过服务器返回401而非302，就能绕过浏览器的自动重定向逻辑，直接拿到原始的错误响应。

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