如何Hook前端Ajax/XMLHTTP请求并将其重定向至指定服务器？

当然可以！这种通过拦截并重定向Ajax/fetch请求的需求完全可以实现，核心思路是覆盖浏览器原生的XMLHttpRequest和Fetch API，让所有请求经过你的拦截逻辑后再发送。下面是具体的实现方案和注意事项：

1. 拦截XMLHttpRequest请求 #

绝大多数传统Ajax请求都是基于XMLHttpRequest实现的，我们可以通过重写它的open方法来拦截并修改请求URL：

// 先保存原生的XMLHttpRequest.open方法，避免被覆盖后无法调用
const originalXhrOpen = XMLHttpRequest.prototype.open;

// 重写open方法
XMLHttpRequest.prototype.open = function(method, url, ...restArgs) {
  // 替换目标域名：把apple和mango的域名替换成orange
  const modifiedUrl = url.replace(/^(https?:\/\/)(www\.apple\.com|www\.mango\.com)/, '$1www.orange.com');
  
  // 调用原生的open方法，传入修改后的URL和其他原始参数
  return originalXhrOpen.call(this, method, modifiedUrl, ...restArgs);
};

这段代码会拦截所有通过XMLHttpRequest发起的请求，自动将目标URL中的www.apple.com和www.mango.com替换为www.orange.com，同时保留请求的其他参数（比如请求方法、异步标识等）。

2. 拦截Fetch API请求 #

现代网页越来越多地使用fetch API发起请求，所以我们需要同时覆盖window.fetch方法：

// 保存原生fetch方法
const originalFetch = window.fetch;

// 重写fetch方法
window.fetch = function(resource, ...restArgs) {
  let modifiedResource = resource;

  // 处理资源参数为字符串的情况
  if (typeof resource === 'string') {
    modifiedResource = resource.replace(/^(https?:\/\/)(www\.apple\.com|www\.mango\.com)/, '$1www.orange.com');
  } 
  // 处理资源参数为Request对象的情况
  else if (resource instanceof Request) {
    modifiedResource = new Request(
      resource.url.replace(/^(https?:\/\/)(www\.apple\.com|www\.mango\.com)/, '$1www.orange.com'),
      resource // 保留原Request的所有配置（比如头信息、凭证等）
    );
  }

  // 调用原生fetch方法
  return originalFetch.call(window, modifiedResource, ...restArgs);
};

这段代码会处理fetch的两种参数形式（字符串URL或Request对象），确保所有fetch请求都能被正确拦截重定向。

3. 关键注意事项 #

• 脚本注入时机：必须确保你的拦截脚本在页面中其他业务脚本之前执行（比如插入到<head>标签的最顶部）。如果业务脚本已经先创建了XMLHttpRequest实例或调用了fetch，那你的拦截逻辑就无法生效了。
• CORS限制：如果www.orange.com没有配置允许当前页面域名的跨域资源共享（CORS）规则，浏览器会直接拦截重定向后的请求，返回跨域错误。需要目标服务器设置正确的Access-Control-Allow-Origin等响应头。
• 框架兼容性：像axios、jQuery.ajax这类封装后的请求库，底层大多还是基于XMLHttpRequest或fetch，所以上面的拦截逻辑通常能生效。但如果遇到完全自定义的请求实现（比如通过WebSocket或其他特殊方式），可能需要额外针对性处理。
• 复杂请求处理：如果请求携带了自定义头、Cookie凭证等，上面的代码通过扩展运算符...restArgs保留了原始参数，一般能正常传递，但如果有特殊的请求配置，可能需要在拦截逻辑中额外处理。

如果还有更复杂的需求（比如只拦截特定路径、修改请求体等），可以在拦截逻辑中添加更多判断和处理逻辑。

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