Fetch response.redirected 属性

在处理网络请求时，了解请求是否被重定向非常重要。response.redirected 属性提供了一种简单的方式来检查一个响应是否是由于服务器的重定向而产生的。

什么是重定向？

在 HTTP 协议中，重定向是指客户端从一个 URL 被引导到另一个 URL 的过程。这种机制通常用于临时或永久地将用户重定向到新的资源位置。常见的重定向状态码包括 301（永久移动）、302（临时移动）等。

使用 Fetch API 发送请求

首先，我们需要使用 Fetch API 来发送一个请求，并在请求过程中可能会遇到重定向。下面是一个基本的 Fetch 请求示例：

// www.javascriptcn.com code example
fetch('https://example.com', {
    method: 'GET',
    redirect: 'follow' // 默认值，自动跟随重定向
})
.then(response => {
    if (response.redirected) {
        console.log('请求被重定向到了：', response.url);
    } else {
        console.log('请求成功，没有重定向');
    }
    return response.text();
})
.then(data => {
    console.log('响应数据:', data);
})
.catch(error => {
    console.error('请求错误:', error);
});

在这个例子中，我们通过 response.redirected 检查响应是否因为重定向而产生。如果 response.redirected 为 true，则说明请求经历了一个或多个重定向。

控制重定向行为

Fetch API 允许开发者控制重定向的行为。可以通过设置 redirect 选项来指定如何处理重定向：

• 'follow': 自动跟随重定向，这是默认行为。
• 'error': 不跟随重定向，并抛出一个错误。
• 'manual': 不自动跟随重定向，需要手动处理重定向。

例如，如果我们不希望自动跟随重定向，可以这样设置：

// www.javascriptcn.com code example
fetch('https://example.com', {
    method: 'GET',
    redirect: 'manual'
})
.then(response => {
    if (response.status === 302) {
        console.log('检测到重定向，但未自动跟随');
        console.log('重定向地址：', response.headers.get('Location'));
    } else {
        console.log('请求成功，没有重定向');
    }
    return response.text();
})
.then(data => {
    console.log('响应数据:', data);
})
.catch(error => {
    console.error('请求错误:', error);
});

处理跨域重定向

当涉及到跨域请求时，浏览器的安全策略会限制对响应头和响应体的访问。然而，对于重定向的检测，即使目标站点与源站点不同域，response.redirected 属性仍然可用。

// www.javascriptcn.com code example
fetch('https://another-domain.com', {
    method: 'GET',
    redirect: 'follow'
})
.then(response => {
    if (response.redirected) {
        console.log('请求被重定向到了跨域地址：', response.url);
    } else {
        console.log('请求成功，没有重定向');
    }
    return response.text();
})
.then(data => {
    console.log('响应数据:', data);
})
.catch(error => {
    console.error('请求错误:', error);
});

实际应用案例

假设你需要实现一个功能，允许用户下载文件，但是服务器可能通过重定向的方式将用户引导到实际的文件位置。你可以使用 response.redirected 属性来检测这种情况：

// www.javascriptcn.com code example
function downloadFile(url) {
    fetch(url, {
        method: 'GET',
        redirect: 'follow'
    })
    .then(response => {
        if (response.redirected) {
            console.log('文件位于：', response.url);
        } else {
            console.log('文件已直接提供');
        }
        return response.blob(); // 将响应体转换为 Blob 对象以便下载
    })
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'filename.ext'; // 文件名
        document.body.appendChild(a);
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
    })
    .catch(error => {
        console.error('下载失败:', error);
    });
}

// 使用函数
downloadFile('https://example.com/download');

在这个例子中，我们检测了请求是否被重定向，并根据结果采取不同的处理方式。

总结

response.redirected 属性为开发者提供了方便的方法来检查请求是否因服务器的重定向而产生。这在处理复杂的网络请求、确保用户正确获取所需资源方面非常有用。通过合理利用这一属性，我们可以构建更加健壮和灵活的应用程序。