Service Worker 无法直接修改请求头或响应体，只能通过拦截 fetch 事件、构造新请求和自定义响应间接实现改写；其根本原因是 event.request 为只读对象，且浏览器出于安全限制禁止运行时篡改。
Service Worker 本身无法直接修改发起的 HTTP 请求头（如 Authorization、Cookie 等），也不能在 fetch 事件中直接篡改已发出请求的原始头信息；它也不能直接修改服务器返回的响应体内容（如 HTML、JSON）——但可以通过拦截 fetch 事件、发起新请求并构造自定义响应的方式，**间接实现“动态改写请求头”和“重写响应体”的效果**。关键在于理解其拦截-重发-合成响应的模式。
为什么不能直接修改请求头？
浏览器出于安全与规范限制，在 fetch 事件的 event.request 中，只暴露只读的 Request 对象。常见可读但不可写的字段包括：headers、method、url（部分只读）。例如：
-
new Request(url, { headers: {...} })可创建带自定义头的新请求，但原请求已不可变； - 调用
event.request.headers.set('X-My-Header', '1')会抛出TypeError； - 只有
Content-Type为no-cors的请求才允许携带自定义头，且仅限有限白名单（如Accept、Content-Type）。
如何“动态改写请求头”？
实际做法是：在 fetch 事件中，基于原始请求构造一个新 Request，显式传入修改后的 headers 和其他参数，再用 fetch() 发起新请求。
- 提取原始 URL 和 method：
const { url, method } = event.request; - 克隆并扩展 headers：
const newHeaders = new Headers(event.request.headers); newHeaders.set('X-Forwarded-By-SW', 'true'); - 若需添加认证信息：
newHeaders.set('Authorization', 'Bearer ' + getToken()); - 发起新请求：
return fetch(new Request(url, { method, headers: newHeaders, body: event.request.body, redirect: 'follow' }));
如何“动态改写响应体”？
Service Worker 可完整读取响应体（通过 response.clone().text() 或 .json()），处理后再用 new Response() 构造新响应返回。注意：必须使用 clone() 避免消费原始响应流。
- 等待原始响应：
const response = await fetch(event.request); - 克隆并读取：
const cloned = response.clone(); const body = await cloned.text(); - 修改内容（如注入脚本）：
const modifiedBody = body.replace('', '<script src="/sw-injected.js"></script>'); - 复用原响应状态与头，替换 body：
return new Response(modifiedBody, { status: response.status, statusText: response.statusText, headers: response.headers });
注意事项与限制
这类操作有明确边界，需规避常见陷阱：
- 跨域请求默认不带 credentials，如需 cookie，构造新请求时须加
credentials: 'include'； - 响应体改写对大文件（如视频、PDF）不实用，因需全部加载到内存；
- 改写 HTML 时注意字符编码，建议先检查
response.headers.get('content-type')是否含charset=； - 避免无限循环：确保改写逻辑不触发自身再次拦截（例如注入的脚本发起同域请求，应加 URL 过滤）。
