我如何拦截只有一个端点的一个域为我的浏览器API调用?

Question

假设我输入一个(公共)网站，在3个不同的端点上进行3次XHR/fetch调用:

• https://api.example.com/path1
• https://api.example.com/path2
• https://api.example.com/path3

我想要实现的是截获对https://api.example.com/path2的调用，将其重定向到本地服务(localhost:8000)，并让path1和path3通过原始域。

我在这里有什么选择?我研究了很多方法来解决这个问题:

• DNS重写-此解决方案不适合，因为我仍然必须拦截path1和path3，只将它们重定向到原始ip，并尽可能地模仿标头-这意味着我必须为每个拦截域做特定的代理配置-这是不可行的
• Chrome扩展-发现没有专门处理单端点拦截
• 在页面加载后覆盖fetch和XmlHttpRequest -仍然不能覆盖所有场景，也许有些网站在页面加载前缓存fetch和XmlHttpRequest的值(?)

Answer 1

结合chrome扩展和fetch覆盖将工作

1. 下载一个web扩展，让你在一个给定的页面加载之前加载javascript代码，例如用户javascript和CSS
2. 添加以下脚本在页面加载之前运行，基于:拦截JavaScript获取API请求和响应

    const { fetch: originalFetch } = window;
    window.fetch = async (...args) => {
      let [resource, config ] = args;
    
      // request interceptor starts
      resource = resource === "https://api.example.com/path2" ? "http://localhost:8000/path2" : resource
      // request interceptor ends
    
      const response = await originalFetch(resource, config);
    
      // response interceptor here
      return response;
    };