Angular中如何在XMLHttpRequest发送前访问并修改请求体？

第三方库如果用的是原生XMLHttpRequest而非Angular自带的HttpClient，那Angular的HttpInterceptor就管不到这类请求了——得靠改写XMLHttpRequest的原型方法来拦截并修改请求体，具体步骤如下：

1. 编写XHR拦截逻辑 #

在应用初始化阶段（比如通过APP_INITIALIZER）注入拦截代码，重写XMLHttpRequest的open和send方法，以此捕获请求并修改请求体：

export function interceptXHR() {
  const originalOpen = XMLHttpRequest.prototype.open;
  const originalSend = XMLHttpRequest.prototype.send;

  // 重写open方法，记录请求的基础信息（可选，方便后续判断是否需要修改）
  XMLHttpRequest.prototype.open = function(method: string, url: string) {
    this._requestMethod = method;
    this._requestUrl = url;
    return originalOpen.apply(this, arguments);
  };

  // 重写send方法，在这里修改请求体
  XMLHttpRequest.prototype.send = function(body?: any) {
    let modifiedBody = body;

    // 根据请求体类型做针对性修改
    if (typeof body === 'string') {
      // 处理JSON格式的字符串请求体
      try {
        const parsedBody = JSON.parse(body);
        // 示例：添加租户ID字段
        parsedBody.tenantId = '你的租户ID';
        // 也可以修改现有字段，比如parsedBody.data = '修改后的数据'
        modifiedBody = JSON.stringify(parsedBody);
      } catch (err) {
        // 非JSON字符串，比如表单查询参数，直接拼接额外参数
        modifiedBody = body ? `${body}&additionalParam=自定义值` : body;
      }
    } else if (body instanceof FormData) {
      // 处理FormData类型的请求体
      body.append('tenantId', '你的租户ID');
      modifiedBody = body;
    }
    // 其他类型（如Blob、ArrayBuffer）可根据需求自行扩展处理逻辑

    // 调用原生send方法，传入修改后的请求体
    return originalSend.apply(this, [modifiedBody]);
  };
}

2. 在Angular中注册拦截逻辑 #

把上面的拦截逻辑注册到AppModule的APP_INITIALIZER中，确保应用启动时就生效：

import { NgModule, APP_INITIALIZER } from '@angular/core';

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: interceptXHR,
      multi: true
    }
  ]
})
export class AppModule { }

关于你现有beforeSend逻辑的补充 #

你当前的beforeSend钩子如果只能拿到XHR实例，那没法直接获取到请求体——因为原生XHR没有暴露请求体的属性。所以上面的原型拦截方法是更可靠的方案，能覆盖所有第三方库发起的原生XHR请求。

注意点 #

• 不同请求体类型（JSON、FormData、Blob等）要分开处理，避免破坏原有请求格式。
• 如果第三方库对XHR做了特殊封装，可能需要微调拦截逻辑，确保能捕获到所有目标请求。
• GET请求通常没有请求体，无需处理这类情况。

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