如何绕过 Angular 使用自己的猴子补丁来撤消我的猴子补丁？答案

【问题标题】：How do I get around Angular undoing my monkey patching with its own monkey patching?如何绕过 Angular 使用自己的猴子补丁来撤消我的猴子补丁？
【发布时间】：2019-10-27 22:12:45
【问题描述】：

我想拦截 Google Maps API 的 XHR 请求，以便我可以通过我自己的代理服务器运行它们，以此来保护我的 API 密钥的私密性。

Angular 有自己的 HttpInterceptors，但它们只会拦截使用 Angular 的 HttpClient 发出的 XHR 请求，而不是 Maps API 在 Angular 框架之外发出的任何请求。我认为猴子修补 XMLHttpRequest.open() 将是获取前往 Maps API 的请求的最佳方式，我已经这样做了：

  var oldXHROpen = XMLHttpRequest.prototype.open;

  XMLHttpRequest.prototype.open = function(method, url, async, username, password) {
    console.log(url);
    return oldXHROpen.apply(this, arguments);
  };

上面的代码放在我的index.html 的<head> 部分的<script> 中，所以它肯定会在执行任何Angular 代码之前执行。

补丁可以工作......很短的时间。我看到我的代码加载的一些资产的 URL 已注销，但随后出现以下消息：

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

之后，只记录了一个 URL，这是我进行的最后一次拦截。 XHR 请求继续被处理，但我的补丁从未看到它们发生。

我确定这与 zone.js 有关，但我仍然不明白它是如何发生的。由于我在 Angular 或 zone.js 之前重新定义了XMLHttpRequest.prototype.open，甚至有机会看到隐藏在oldXHROpen 变量中的原始open() 函数，如何直接连接到本机open()再次发生，绕过我的补丁？

【问题讨论】：

只是抛出一些想法：它不一定将 open 连接回本机，它可以阻止调用您的修补方法
我试图复制它但不能：codesandbox.io/s/angular-mo2on。也许问题出在另一座城堡中
你尝试过 Angular 自己的proxyConfig 机制吗？ github.com/angular/angular-cli/blob/master/docs/documentation/…
@Andrey，即使在我的情况下，也发生了 some 拦截，但几次之后就停止了。我想它甚至可能是特定于开发环境的，因为记录的最后一个请求是到 localhost，我认为这是用于检查应用程序是否应该重新启动的调用之一，因为代码可能已经更改。
@mbojko，我还没有，但稍后我会更详细地介绍。一眼看去，我无法判断该代理是否通过 HttpClient。如果它使用 HttpClient，它在这里没有帮助。

标签： javascript angular google-maps xmlhttprequest monkeypatching

【解决方案1】：

看来我是在一个错误的前提下工作的，即 Google Maps API 的客户端必须发出 XHR 请求才能完成其工作。

它没有。这一切都是通过加载图像、CSS 和字体来完成的，并添加了一点 JSONP。

我的猴子补丁确实有效，没有被 Angular 撤消。

【讨论】：