Fetch request.redirect 属性

在使用 Fetch API 发送网络请求时，request.redirect 属性可以用来指定如何处理重定向。重定向是指服务器将客户端的请求重定向到另一个 URL 的过程。了解和正确配置 request.redirect 属性对于构建健壮的前端应用非常重要。

请求重定向的基本概念

当一个请求被重定向时，浏览器会自动发送一个新的请求到新的 URL。这个过程是透明的，但有时你可能需要控制或了解这些行为。request.redirect 属性允许你在发送请求之前明确地设置你希望如何处理这些重定向。

request.redirect 属性的值

request.redirect 属性接受以下三种字符串值：

• "follow"：这是默认值。浏览器会自动跟随重定向。
• "manual"：浏览器不会自动处理重定向，而是返回原始响应对象。你需要手动检查响应状态码，并决定是否需要处理重定向。
• "error"：任何重定向都会导致请求失败并抛出错误。

使用 request.redirect = "follow"

当你设置 request.redirect = "follow" 时，浏览器会自动处理所有重定向。这意味着，如果服务器返回一个重定向响应（例如 HTTP 状态码为 301 或 302），浏览器会自动发送一个新的请求到重定向后的 URL，并将结果返回给你的代码。

fetch('https://example.com', {
    method: 'GET',
    redirect: 'follow'
}).then(response => {
    console.log('Redirected response:', response);
}).catch(error => {
    console.error('Error during fetch:', error);
});

使用 request.redirect = "manual"

当你设置 request.redirect = "manual" 时，浏览器不会自动处理重定向。相反，它会返回一个带有 redirected 属性的响应对象。你可以通过检查 response.redirected 来判断请求是否已经被重定向。

// javascriptcn.com 代码示例
fetch('https://example.com', {
    method: 'GET',
    redirect: 'manual'
}).then(response => {
    if (response.status === 302 && response.headers.get('Location')) {
        // 手动处理重定向
        const newUrl = response.headers.get('Location');
        console.log('Redirected to:', newUrl);
    } else {
        console.log('Non-redirected response:', response);
    }
}).catch(error => {
    console.error('Error during fetch:', error);
});

使用 request.redirect = "error"

当你设置 request.redirect = "error" 时，任何重定向都会导致请求失败，并抛出一个错误。这对于那些不希望处理重定向的场景非常有用。

fetch('https://example.com', {
    method: 'GET',
    redirect: 'error'
}).then(response => {
    console.log('Response:', response);
}).catch(error => {
    console.error('Error due to redirect:', error);
});

实际应用场景

在某些情况下，你可能希望完全避免重定向或者手动处理它们。例如，在进行 API 调用时，你可能希望确保请求没有被意外重定向，从而避免数据泄露或安全问题。在这种情况下，你可以使用 request.redirect = "error" 来强制请求失败，从而让你能够立即发现和处理问题。

总结

通过合理地设置 request.redirect 属性，你可以更灵活地控制 Fetch API 在遇到重定向时的行为。这不仅有助于提高应用的性能和安全性，还能让你更好地理解后台服务的工作方式。无论你是希望完全避免重定向，还是需要手动处理它们，request.redirect 都提供了足够的选项来满足你的需求。