如何代理 Web 应用程序中的所有 XMLHttpRequest 请求？答案

【问题标题】：How to proxy all XMLHttpRequest requests in a web application?如何代理 Web 应用程序中的所有 XMLHttpRequest 请求？
【发布时间】：2021-07-15 23:00:28
【问题描述】：

我正在尝试代理我的 Web 应用程序通过代理服务器发出的所有 XMLHttpRequest 请求。我可以通过服务人员轻松地为所有 fetch 请求执行此操作：

// sw-proxy.js
// I've trimmed out the business logic in this function - but you can see that I can easily proxy my request onwards.
self.addEventListener('fetch', e => {
    // ... some business logic
    e.respondWith(fetch('https://my-proxy-server.com'));
});

但是，XMLHttpRequest 似乎在 service worker 上下文中不可用（我对此不是 100% 确定，但从 spec、this Github issue 和我的代码中看起来是这样的）我试过了）。这基本上让我可以选择猴子修补XMLHttpRequest - 这绝对不是感觉理想。

除了猴子补丁之外，还有更优雅的方法吗？

【问题讨论】：

即使这行得通，它不会使您的所有端点都相同吗？如果这是为了开发，我会使用 package.json 中的代理：create-react-app.dev/docs/proxying-api-requests-in-development 该页面还讨论了使用 npm 中的“http-proxy-middleware”，这可能是一个更好的解决方案。
我把我的代码实现过于简单化了。可以将原始请求传递给代理层，以便它知道将请求转发到哪里。这不仅仅是为了开发 - 不幸的是我不能使用你建议的那个包，因为这必须在浏览器中完成。

标签： javascript xmlhttprequest fetch

【解决方案1】：

原来问题中提供的代码就是答案。正在侦听的 fetch 事件不仅来自 Fetch API，还来自 Fetch API。它也会拦截 XHR 请求。

【讨论】：