Service Worker网络代理

Service Worker网络代理

Service Worker 实现“网络代理”的核心在于它可以 拦截网页中的所有网络请求，并通过 fetch 事件自定义这些请求的处理逻辑。这就类似于“浏览器内部的反向代理服务器”。

Service Worker 是浏览器中的“中间代理层”，能拦截请求、改写请求、离线缓存、模拟接口，是构建高级 Web 应用的重要底层能力

一、核心原理

Service Worker 通过监听 fetch 事件，拦截来自页面的请求，然后你可以：

• 直接返回缓存内容（离线支持）
• 转发请求给网络（默认行为）
• 修改请求 URL（重定向或伪代理）
• 合并本地数据与服务器响应（数据混合）
• 设置请求头、参数等（安全拦截、鉴权）

二、基本代理逻辑示意图

页面请求 --> Service Worker --> 你控制请求去哪儿 --> 返回响应给页面

三、代码示例：模拟网络代理

示例：拦截请求并修改目标 URL

// sw.js
self.addEventListener('fetch', event => {
   
  const url = new URL(event