如何在JavaScript fetch请求遇到302重定向时跳转至目标页面

核心原因 #

当同源AJAX请求（包括Fetch、XMLHttpRequest）遇到服务器返回302重定向时，即使设置了redirect: "manual"，浏览器出于安全和同源策略限制，不会将302状态码、Location头暴露给前端JavaScript，反而会返回status: 0的空响应，这就是你遇到问题的根源。

可行解决方案 #

方案一：修改服务器端逻辑（推荐） #

这是最可靠的解决方式：

• 服务器判断请求是否为AJAX请求：可通过检查请求头，比如X-Requested-With: XMLHttpRequest（传统AJAX自带该头，Fetch需手动添加），或Accept头是否包含application/json（若接口返回JSON格式数据）。
• 当会话过期时，对AJAX请求返回401 Unauthorized状态码，而非302重定向。
• 前端检测到401状态后，直接跳转至登录页。

修改后的前端代码示例：

fetch("url-that-forces-a-redirect", {
    method: "POST",
    headers: {
        "X-Requested-With": "XMLHttpRequest" // 手动添加AJAX标识头
    },
    body: formData
}).then((response) => {
    if (response.status === 401) {
        // 会话过期，跳转到登录页
        window.location.href = "/login"; // 也可从服务器响应头/响应体获取登录URL
        return;
    }
    // 处理正常业务响应
    return response.json();
}).catch(err => {
    console.error(err);
});

方案二：前端绕过限制（仅当无法修改服务器时使用） #

若服务器逻辑无法调整，可通过response.type间接判断重定向：
当浏览器自动跟随302重定向到登录页（HTML页面）时，response.type会变为"opaqueredirect"（需设置redirect: "manual"），可通过该标识触发跳转逻辑。

代码示例：

fetch("url-that-forces-a-redirect", {
    method: "POST",
    redirect: "manual",
    body: formData
}).then((response) => {
    if (response.type === "opaqueredirect") {
        // 推测发生重定向，跳转到固定登录页地址
        window.location.href = "/login";
        return;
    }
    // 处理正常业务响应
}).catch(err => {
    console.error(err);
});

注意：该方法依赖浏览器对opaqueredirect类型的支持，且无法动态获取重定向目标URL，只能使用固定登录页地址，适用性有限。

关于XMLHttpRequest的补充 #

XMLHttpRequest同样存在浏览器限制，无法直接获取302状态码和Location头，可采用上述两种方案解决：要么让服务器返回401状态码，要么通过响应类型/内容间接判断处理。

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