如何在JavaScript中客户端覆盖同域HTTP请求响应？

我希望为同域的所有HTTP请求返回自定义响应，比如让以下代码里的所有请求都返回"Custom Response"加上请求URL：

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<img src="image.jpg">

<script>
  fetch("data.json");

  const xhr = new XMLHttpRequest();
  xhr.open("GET", "info.txt");
  xhr.send();
</script>

我原本期望能通过类似下面的方式实现：

document.addEventListener("overwritableRequest", function(request) {
  request.overwriteBody("Custom Response " + request.url);
});

但显然不存在overwritableRequest事件，那用真实的Web API该怎么实现？

调研情况 #

我看过一些类似的方案，但它们只覆盖了XMLHttpRequest和fetch请求，没处理HTML元素发起的请求，而且重写函数的方式繁琐又不优雅。我自己想过修改元素属性的方法，比如：

document.querySelectorAll("[src]").forEach(e => e.src = "[自定义内容的文件]");
document.querySelectorAll("link[href]").forEach(e => e.href = "[自定义内容的文件]");

但这种方法要手动处理各种场景，还对script元素无效。另外我的网站是静态的，后端只是文件服务器，没法通过后端覆盖请求。有没有通用的函数或事件能覆盖所有这些场景？

最通用且优雅的方案是使用Service Worker，它可以拦截所有同域的网络请求（包括HTML元素发起的资源请求、fetch、XMLHttpRequest），并返回自定义响应，完全符合你的需求。

实现步骤 #

1. 注册Service Worker
   在页面的主脚本中添加注册代码：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker 注册成功');
    } catch (error) {
      console.log('Service Worker 注册失败:', error);
    }
  });
}

2. 编写Service Worker脚本（sw.js）
   在网站根目录创建sw.js，编写请求拦截逻辑：

self.addEventListener('fetch', (event) => {
  // 只处理同域请求
  if (new URL(event.request.url).origin === self.location.origin) {
    event.respondWith(
      new Response(`Custom Response ${event.request.url}`, {
        status: 200,
        headers: { 'Content-Type': 'text/plain' }
      })
    );
  }
});

这段代码会拦截所有同域请求，直接返回包含请求URL的自定义响应。你可以根据需求调整Content-Type（比如针对CSS返回text/css，针对JSON返回application/json），或者修改响应内容。

进阶优化：按请求类型返回对应响应 #

如果需要针对不同类型的请求返回适配的响应，可以通过event.request.destination判断请求类型，示例：

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.origin === self.location.origin) {
    let contentType = 'text/plain';
    switch(event.request.destination) {
      case 'style':
        contentType = 'text/css';
        break;
      case 'script':
        contentType = 'application/javascript';
        break;
      case 'json':
        contentType = 'application/json';
        break;
      // 图片类型可以返回自定义Blob或ArrayBuffer
      case 'image':
        contentType = 'image/png';
        break;
    }
    event.respondWith(
      new Response(`Custom Response ${url.href}`, {
        status: 200,
        headers: { 'Content-Type': contentType }
      })
    );
  }
});

注意事项 #

• Service Worker需要在HTTPS环境下运行（本地开发时localhost例外）。
• 首次注册后，需要刷新页面才能让Service Worker生效。

其他局限性方案（不推荐） #

如果无法使用Service Worker，只能拆分场景处理：

• 针对fetch和XMLHttpRequest：重写全局构造函数拦截请求，但需要处理大量边界情况，代码繁琐。
• 针对HTML元素请求：用MutationObserver监听元素插入，在元素加载前修改src/href，但对script元素效果有限，脚本可能在修改前就开始加载。

综上，Service Worker是唯一能覆盖所有场景的通用方案，也是最符合需求的优雅实现方式。

内容的提问来源于stack exchange，提问作者noname