时间戳

首页 > 解决方案 > 如何绕过 Angular 使用自己的猴子补丁来撤消我的猴子补丁？

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

问题描述

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

Angular 有自己的HttpInterceptors，但它们只会拦截使用 Angular 发出的 XHR 请求，而HttpClient不是 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);
  };

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

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

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

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

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

标签： javascriptangulargoogle-mapsxmlhttprequestmonkeypatching

解决方案

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

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

我的猴子补丁确实有效，并且不会被 Angular 撤消。

推荐阅读