response.redirect() 是 fetch 标准中用于构造重定向响应对象的方法,需在 fetch 事件中通过 event.respondwith() 返回才能生效;它不触发页面跳转,仅生成含 location 头和状态码的 response,且重定向目标须同源或满足 cors 要求。

Response.redirect() 不是静态方法,也不能在 Service Worker 中直接用于重定向请求。
Service Worker 中的 Response.redirect() 是一个构造函数式方法(即 Response.redirect(url, status)),用于创建一个重定向响应对象,但它本身不会自动触发重定向行为——它只是生成一个带有 301 或 302 状态码和 Location 头的 Response 实例。真正的“重定向”是否生效,取决于你如何使用这个 Response 对象,以及浏览器是否允许该重定向在 Service Worker 的上下文中被应用。
关键点如下:
✅ 正确用法:在 fetch 事件中返回重定向响应
你可以在 self.addEventListener('fetch', ...) 中拦截请求,然后手动构造并返回一个重定向响应:
self.addEventListener('fetch', event => {
const url = new URL(event.request.url);
if (url.pathname === '/old-page') {
// 返回一个 302 临时重定向响应
event.respondWith(
Response.redirect('/new-page', 302)
);
}
});
✅ 浏览器会接收该
Response并按标准 HTTP 行为执行重定向(即发起新请求到/new-page)
✅ 该重定向对页面是透明的,用户地址栏会更新(取决于状态码和 CORS 策略)
⚠️ 注意事项与限制
-
重定向目标必须同源,或满足 CORS 要求(尤其是
301/302后的请求若涉及跨域资源,后续请求需带credentials或服务端配Access-Control-Allow-Origin); - 不能重定向到 data:、blob: 或不支持的协议;
-
Response.redirect()创建的是一个Response对象,不是副作用操作,它不会“跳转当前页面”或“修改全局状态”; - Service Worker 无法拦截或修改浏览器原生的重定向链中间响应(例如服务器返回的 302),只能处理自己生成的响应;
- 若你在
event.respondWith()中返回了Response.redirect(...),则该响应即为最终响应,浏览器负责后续重定向流程。
? 替代方案:手动构造完整重定向响应(更可控)
有时你需要自定义 headers(如添加 Cache-Control),可手动构建:
event.respondWith(
new Response('', {
status: 302,
headers: {
'Location': '/new-page',
'Cache-Control': 'no-store'
}
})
);
这等价于 Response.redirect('/new-page', 302),但更灵活。
❌ 常见误解澄清
-
Response.redirect()不是 Service Worker 特有 API,它是 WHATWG Fetch 标准的一部分,在任何支持Response构造的环境(包括页面脚本、Worker)都可用; - 它不是“跳转当前页面”的方法(不像
window.location.href = ...),它只用于构造响应; - Service Worker 中没有
window、document或导航 API,所以无法调用前端跳转逻辑。
不复杂但容易忽略。











