Question

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

例如，假设该库是通过CDN传递的JavaScript数学库，该CD库使用诸如mathcdn之类的一些数学函数来公开变量add：

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

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

</script>

如果在后台，mathcdn.add方法向数学API发出了HTTP请求，以实际计算两个数字的和，我可以告诉请求仅模拟响应吗？

例如，当库要调用api.com/add?nums[4,5]时，实际上不发送请求，而是模拟{sum: 9}的响应。

使用mocks编写测试时，我已经看到了这一点，但是我需要在客户端上做到这一点。

Answer 1

据我所知，扩展名webRequest APIs确实允许您拦截HTTP请求。但是我认为您无法使用普通的javascript API来做到这一点，因为这会导致安全问题。

但是，您仍然可以通过一些解决方法来达到类似的结果。例如，首先劫持window.fetch()。

<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>

限制

如果您不知道该库如何发出其HTTP请求，则可能必须替换所有可能的函数和类，例如传统的XMLHttpRequest。
通常，您无法异步加载库，即具有async属性的脚本，因为执行顺序将变得不可预测，并且库可能会在替换之前存储对window.fetch()的引用。

在客户端上模拟HTTP请求

1 个答案:

限制