Javascript 在客户端上模拟HTTP请求

我使用的是通过CDN交付的第三方JavaScript API库。该库公开了在幕后执行我无法控制的HTTP请求的方法。是否可以拦截HTTP请求并更改客户端上的响应

例如，假设该库是通过CDN提供的JavaScript数学库，它公开了变量

mathcdn

，其中包含一些数学函数，如

add

：

<script src="math.cdn.com"></script>
<script>

var sum = mathcdn.add([4, 4])

</script>

var sum=mathcdn.add（[4,4]）

如果在幕后，

mathcdn.add

方法对一个数学API执行了一个HTTP请求，以实际计算两个数字的总和，我是否可以告诉该请求只是模拟一个响应

例如，当库想要调用

api.com/add？nums[4,5]

时，不要实际发送请求，而是模拟

{sum:9}

的响应

---

我在使用

mock

编写测试时看到了这一点，但我需要在客户端上执行此操作。

据我所知，扩展确实允许您拦截HTTP请求。但是我不认为用普通的javascript api可以做到这一点，因为它会导致安全问题

但是，您仍然可以通过一些变通方法获得类似的结果。例如，首先是劫机

<script>
  // In case you need to use it again.
  const originalFetch = window.fetch

  window.fetch = function(resource, init) {
    // Let some requests act as usual,
    // e.g., requests from other 3rd-party libraries.
    if (...) return originalFetch(resource, init)

    // Extract the information you need,
    // e.g., query string in the url,
    // and create the corresponding result.
    const result = ...

    // Wrap the result in a Response object,
    // which is how the original fetch returns it.
    // So it won't break the library's following code.
    return new Response(result)
  }
</script>

<script src="math.cdn.com"></script>

//以防你需要再次使用它。
const originalFetch=window.fetch
window.fetch=函数（资源，init）{
//让一些请求像往常一样，
//例如，来自其他第三方库的请求。
如果（…）返回原始蚀刻（资源，初始化）
//提取你需要的信息，
//例如，url中的查询字符串，
//并创建相应的结果。
常量结果=。。。
//将结果包装到响应对象中，
//这就是原始获取返回它的方式。
//所以它不会破坏库的以下代码。
返回新的响应（结果）
}

局限性

• 如果您不知道库是如何发出HTTP请求的，则可能必须替换所有可能的函数和类，例如传统函数和类
• 通常，您不能异步加载库，即使用

  async

  属性的脚本，因为执行顺序将变得不可预测，并且库可能会在替换它之前存储对

  window.fetch（）

  的引用

---

您不能更换整个功能吗？例如，

mathcdn.add=function（[a，b]）{return{sum:a+b}}

。也许这就是我的示例不好的地方。在方法内部，有更多我无法控制的逻辑发生。我只知道在某个时刻有一个HTTP调用，我需要强制忽略它，并用我定义的响应替换它。我想告诉这个方法，‘嘿，当你发出这个HTTP请求时，用我自己的数据模拟它，然后用它做任何你需要做的事情’。这太棒了！尽管所讨论的API是模糊的，但我相信我可以找到发出请求的方法。我还没有试过这个，但我不明白为什么它不起作用。谢谢你的详细回复。