如何在浏览器中拦截库发起的EventSource请求并重定向至localhost:3005？

浏览器端代码拦截方案 #

直接重写原生EventSource构造函数，在依赖库发起请求前替换目标地址：

// 先保存原生的EventSource构造函数
const OriginalEventSource = window.EventSource;

// 重写构造函数实现拦截重定向
window.EventSource = function(url, options) {
  // 解析原请求地址并替换主机为localhost:3005
  const targetUrl = new URL(url);
  targetUrl.host = 'localhost:3005';
  
  // 调用原生方法创建连接，保留原参数
  return new OriginalEventSource(targetUrl.href, options);
};

使用说明：把这段代码放在依赖库加载之前执行，确保所有通过该库创建的EventSource请求都会被自动拦截重定向。

代理工具方案（无需修改代码） #

如果不想改动前端代码，可以用代理工具实现请求转发：

• 启动Charles、MitmProxy这类本地代理工具
• 添加重写规则：匹配所有EventSource请求的域名/路径，将目标主机替换为localhost:3005
• 配置浏览器使用该代理，所有相关请求会自动被转发到指定地址

注意事项 #

• 重定向后的localhost:3005需要配置CORS规则，允许当前页面的域名跨域访问，否则会出现连接失败
• 重写构造函数时务必保留原options参数，避免破坏依赖库的原有功能

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