拦截HTTP的多种方式

部分场景下需要修改请求报文信息,可以利用 AOP 思维(切面编程),对请求进行拦截处理。Web 中有见的几种发送请求的方式:

  • XMLHttpRequest
  • fetch
  • window.navigator.sendBeacon
  • new Image
  • service worker

针对这几种不同的场景,分别拦截处理它的 URL 和请求参数

(一)设计

符合条件 使用新的 URL , BDOY 不符合条件 请求 Filter Adaptor 发送请求

FilterAdaptor 成对出现,满足过滤过滤器的条件后,使用对用的适配器修改 URLBDOY

(二)不同的请求方式

1. XMLHttpRequest

XHR 的核心思路:

  1. 拦截 open,缓存参数信息
  2. 拦截 send,对 urlbody处理
  3. 调用原生 open、send 发送请求

核心代码实现:

ts 复制代码
class CustomXhr extends NativeXhr {
  private _method!: string;
  private _src = "" as K;
  private _async!: boolean;
  private _username?: string | null;
  private _password?: string | null;
  private _headers: Record<string, string> = {};

  open(
    method: string,
    url: K,
    async: boolean = true,
    username?: string | null,
    password?: string | null
  ) {
    this._method = method;
    this._src = url;
    this._async = async;
    this._username = username;
    this._password = password;
  }

  setRequestHeader(name: string, value: string) {
    this._headers[name] = value;
  }

  send(body?: T) {
    let url = "" as K;
    let data = body;

    if (!_this.useNative) {
      [url, data] = _this.callFilterAndAdapter(this._src, body);
    }

    // Open
    super.open(this._method, url, this._async, this._username, this._password);

    // 设置请请求头
    Object.keys(this._headers).forEach((key) => {
      super.setRequestHeader(key, this._headers[key]);
    });

    return super.send(data);
  }
}

2. fetch

fetch 拦截的思路:

  1. 使用函数对原生 fetch 进行包装

核心代码实现:

ts 复制代码
const NativeFetch = window.fetch;

function CustomFetch(input: K, init?: RequestInit) {
  if (_this.useNative) {
    return NativeFetch(input, init);
  }

  const [url, data] = _this.callFilterAndAdapter(input, init?.body as T);
  if (init && data) {
    init.body = data;
  }
  return NativeFetch(url, init);
}

window.fetch = CustomFetch as typeof window.fetch;

3. window.navigator.sendBeacon

sendBeacon 的拦截思路:

  1. 同 fetch 的实现思路,对原生的 window.navigator.sendBeacon 进行包装一层

核心代码:

ts 复制代码
const oldSendBeacon = window.navigator.sendBeacon;
window.navigator.sendBeacon = (url: K, data: T) => {
  // 使用原生方式
  if (this.useNative) {
    return oldSendBeacon.call(window.navigator, url, data);
  }

  const [newUrl, newData] = this.callFilterAndAdapter(url, data);
  return oldSendBeacon.call(window.navigator, newUrl, newData);
};

备注:sendBeacon 的上下文一定要是window.navigator,所以需要使用oldSendBeacon.call(window.navigator, url, data)

4. new Image

new Image的拦截思路:

  1. CustomImage 类继承自 Window.Image
  2. 使用 set、get 拦截 src属性的读写

核心代码实现:

ts 复制代码
const NativeImage = window.Image;

class CustomImage extends NativeImage {
  private _src!: K;

  set src(value: K) {
    if (_this.useNative) {
      this._src = value;
      return;
    }

    this._src = _this.newSetHandler(value);
    this.setAttribute("src", this._src);
  }

  get src() {
    return this._src;
  }
}

window.Image = CustomImage;

5. service worker

这个就不细聊了,有兴趣的可以自己去看下

(三)源码

install

bash 复制代码
npm i @swl/http-interceptor

源代码: https://github.com/swlws/http-interceptor

相关推荐
zhao3266857516 小时前
2025年代理IP三强横评:LoongProxy、神龙海外动态IP代理、全民HTTP怎么选?看完这篇不踩坑
网络协议·tcp/ip·http
on the way 1236 小时前
多线程之HardCodedTarget(type=OssFileClient, name=file, url=http://file)异常
网络·网络协议·http
想睡hhh11 小时前
HTTPS协议——对于HTTP的协议的加密
http·https
福大大架构师每日一题14 小时前
go 1.25.1发布:重点修复net/http跨域保护安全漏洞(CVE-2025-47910)
开发语言·http·golang
Chan1614 小时前
消息推送的三种常见方式:轮询、SSE、WebSocket
java·网络·websocket·网络协议·http·sse
司徒小夜1 天前
HTTP与HTTPS杂谈-HTTPS防御了什么
网络·http·https
一只游鱼1 天前
利用keytool实现https协议(生成自签名证书)
网络协议·http·https·keytool
码熔burning1 天前
RPC 和 HTTP 的区别
网络协议·http·rpc
吐个泡泡v2 天前
网络编程基础:一文搞懂 Socket、HTTP、HTTPS、TCP/IP、SSL 的关系
网络·网络协议·http·https·socket·ssl·tcp
liulilittle2 天前
HTTP简易客户端实现
开发语言·网络·c++·网络协议·http·编程语言