如何在Web应用中代理所有XMLHttpRequest请求？

首先纠正一个常见理解偏差：Service Worker 自身运行环境确实不支持XMLHttpRequest，但页面上下文发起的所有XMLHttpRequest请求，默认都会触发 Service Worker 的fetch事件，你当前写的SW代理逻辑本身就可以直接拦截XHR请求，不需要额外对XHR做处理。

如果之前测试发现XHR没有被拦截，优先排查以下几个常见原因：

• Service Worker 注册时的作用域没有覆盖发起XHR的页面路径。如果SW文件存放在二级目录下，默认只能拦截对应二级路径下的请求，需要在注册时显式指定scope: '/'，同时服务端要给SW文件返回Service-Worker-Allowed: /的响应头
• XHR是在Service Worker激活完成之前发起的，可在SW的activate事件回调中调用clients.claim()，让SW直接接管所有已打开的同作用域页面，不需要刷新即可生效
• 跨域XHR的预检请求被浏览器长期缓存，导致后续同规则请求没有触发fetch事件，调整服务端的Access-Control-Max-Age配置即可

其他替代方案（无法使用Service Worker场景下） #

如果你的应用需要兼容不支持Service Worker的老旧浏览器，或是有其他特殊限制无法使用SW拦截，也可以选择比Monkey Patching更优雅的实现：

• 收敛应用内所有请求逻辑到统一的工具函数中，无论是fetch还是XMLHttpRequest调用都走同一入口，在入口层统一完成代理逻辑的拼接，比如自动在目标URL前加上代理服务前缀、添加代理所需的自定义头
• 如果有不受你控制的第三方依赖发起XHR，可使用轻量的子类继承方案：定义一个继承自原生XMLHttpRequest的子类，仅重写open方法修改目标请求地址为代理地址，其余逻辑完全复用原生实现，再将window.XMLHttpRequest指向这个子类，侵入性远低于全量修改XHR原型的Monkey Patching方案

内容的提问来源于stack exchange，提问作者Dave Cooper