Flask实现反向代理时如何让所有JavaScript发起的网络请求走代理

你遇到的问题本质是静态DOM改写只能覆盖HTML中硬编码的链接，无法覆盖JS动态生成的链接、AJAX/Fetch请求、动态创建的资源标签的请求，要实现全量请求走代理，需要服务端+前端配合处理。

• 思路1：用JavaScript实现请求拦截改写
  可行性很高，是当前这类代理应用的主流实现方案，具体落地可以分三个部分实现：
  1. 在返回给前端的HTML <head> 最开头注入一段前置JS，重写全局请求API：
     • 重写 window.fetch 方法，所有调用前自动把目标URL转换为 /proxy/<编码后的目标URL> 格式
     • 重写 XMLHttpRequest.prototype.open 方法，拦截请求路径做同样改写
     • 重写 WebSocket 构造函数，代理WS/WSS协议的请求
  2. 用 MutationObserver 监听全局DOM变化，所有动态插入的 <a>、<img>、<script>、<link>、<iframe> 等标签，自动改写其 src/href/action 属性为代理路径
  3. 提前在注入的JS中存储当前代理的目标站点根域名，所有相对路径的请求先拼接为目标站点的绝对URL，再套代理前缀，避免路径解析错误
• 思路2：借助CORS规则拦截跨域请求
  完全不可行：CORS是浏览器的跨域安全限制，只能限制跨域请求的响应能否被当前页面读取，无法阻止请求本身向外发送，而且会导致页面出现大量控制台报错，完全达不到让请求走代理的目的。

• 路由层优化：使用Flask的path参数匹配规则避免URL截断，路由定义为 @app.route('/proxy/<path:target_url>')，接收完整的目标URL，不要用普通字符串参数，否则URL中的斜杠会被路由截断
• 服务端静态改写：用BeautifulSoup处理HTML内容时，覆盖所有可能携带链接的属性：
  • 标签属性包括 <a>的href、<form>的action、<img>/<script>/<iframe>/<video>的src、<link>的href等
  • 处理3xx重定向响应时，改写响应头中的Location字段为代理路径，避免直接跳转到目标站点
• 请求/响应头适配：
  1. 转发请求到目标站点时，替换Host、Origin、Referer头为目标站点对应的值，避免被目标站点的反爬策略拦截
  2. 回传响应给前端时，修改Set-Cookie头的Domain、Path属性为当前代理站点的对应值，保证Cookie能正常携带
  3. 移除响应头中的Content-Security-Policy（内容安全策略）头，避免CSP规则阻止你注入的JS代码执行
• JS内容预处理：对于返回的JS静态资源，服务端可以做正则替换，把硬编码的目标站点域名批量替换为代理路径前缀，进一步减少漏网请求。

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