JavaScript 中怎么用 ServiceWorker 拦截请求伪造同源响应-js教程-PHP中文网

serviceworker不能伪造同源响应绕过cors，但可拦截同源或预检通过的跨域请求，返回由自身构造的、被浏览器视为同源的响应，从而让前端直接读取数据。

javascript 中怎么用 serviceworker 拦截请求伪造同源响应

ServiceWorker 本身不能“伪造同源响应”来绕过同源策略（CORS），但可以通过拦截请求并返回自定义的 同源响应（即响应来自当前 origin）来实现类似效果——前提是该响应内容由你控制（如缓存、预置数据或本地生成），且浏览器认为它“来自同源”。关键在于：ServiceWorker 只能拦截和响应**同源请求**（或被 CORS 预检放行的跨域请求），而它返回的 Response 对象默认具有与当前页面相同的 origin，因此可被前端 JavaScript 安全读取。

明确前提：哪些请求能被 ServiceWorker 拦截

ServiceWorker 只能注册在 HTTPS（或 localhost）环境下，且只能控制其 scope 范围内 的同源页面请求。它可拦截以下请求：

页面发起的 fetch / XMLHttpRequest（同源或带 CORS 头的跨域）
静态资源（HTML/CSS/JS/图片等）加载
导航请求（navigation，如页面跳转）

⚠️ 注意：它无法拦截 iframe 的非同源子资源（除非该 iframe 也受同一 SW 控制且同源），也不能让跨域请求“假装”成同源——真正的跨域响应仍需服务端设置 Access-Control-Allow-Origin 才能被 JS 读取 body。

拦截请求并返回自定义同源响应（常用场景）

典型做法是：在 fetch 事件中判断 URL，阻止真实网络请求，用 Response 构造一个“看起来同源”的响应。

示例：将所有 /api/user 请求拦截，返回模拟 JSON 数据

China Ecommerce Customer Service

中国电商客服话术生成器，适用于淘宝、京东、拼多多等平台，支持询单回复、投诉处理、售后服务、评价等场景。

下载

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.pathname === '/api/user' && event.request.method === 'GET') {
    event.respondWith(
      new Response(JSON.stringify({ id: 1, name: 'Mock User' }), {
        headers: { 'Content-Type': 'application/json' }
      })
    );
  }
});

这个响应没有 origin（Response 对象无 origin 概念），但因为由同源 ServiceWorker 发出，且未携带 CORS 头，浏览器将其视为“same-origin response”，前端 fetch 可直接读取 response.json()，无需 CORS 支持。

进阶：代理跨域请求并注入同源响应头（不推荐但可行）

若后端 API 是跨域的，你又无法改服务端，可在 ServiceWorker 中 fetch 真实跨域接口，再用 Response 包装并手动添加 CORS 头 —— 这不是“伪造同源”，而是显式声明允许跨域：

if (url.pathname.startsWith('/proxy/')) {
  const target = url.pathname.replace('/proxy/', 'https://api.example.com/');
  event.respondWith(
    fetch(target)
      .then(res => new Response(res.body, {
        status: res.status,
        statusText: res.statusText,
        headers: {
          'Content-Type': res.headers.get('Content-Type') || 'application/json',
          'Access-Control-Allow-Origin': '*', // 或指定你的域名
          'Access-Control-Allow-Credentials': 'true'
        }
      }))
  );
}

⚠️ 此方式仍受限于目标服务端是否允许 CORS 预检（如带 cookie 的请求需服务端明确支持），且 Access-Control-Allow-Origin: * 不支持 credentials。真正安全的做法仍是服务端配置正确 CORS。