如何在Angular中使用HttpClient访问Incoming Message对象

首先明确前提：你贴出的IncomingMessage是Node.js服务端接收请求后生成的原生对象，属于后端运行时的内容，Angular前端的运行环境中不存在该结构。你可以通过HttpClient配套的能力获取前端发起请求的所有可控参数，和后端收到的内容做校验。

实现方案（优先用拦截器全局捕获所有HttpClient请求） #

Angular的HttpInterceptor可以拦截所有通过HttpClient发起的请求，直接拿到请求的全量可控信息，实现步骤如下：

1. 新建请求拦截器文件request-log.interceptor.ts

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class RequestLogInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 这里可以拿到所有前端发起请求的信息，和后端IncomingMessage对应字段比对即可
    console.log('请求方法', request.method);
    console.log('请求完整URL', request.urlWithParams);
    console.log('请求头', request.headers.keys().map(key => ({[key]: request.headers.get(key)})));
    console.log('请求体', request.body);
    
    return next.handle(request);
  }
}

2. 在AppModule的providers中注册拦截器，使其生效

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RequestLogInterceptor } from './request-log.interceptor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestLogInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

临时调试方案 #

如果不需要全局捕获，只需要校验单个请求，可以直接在调用HttpClient的位置打印你构造的请求参数即可：

// 示例请求代码
const requestUrl = '/api/teradata/databases/view/djfg';
const requestOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/json'
  })
}
// 直接打印你传入的请求参数即可校验
console.log('本次请求参数', requestUrl, requestOptions);
this.http.get(requestUrl, requestOptions).subscribe(res => {
  // 处理响应
})

注意事项 #

• 服务端IncomingMessage中的session、secret、signedCookies等字段是服务端自身生成/解析的内容，前端无法直接获取
• 如果Cookie标记了httpOnly: true，前端JS也无法读取该Cookie值，属于浏览器安全限制
• 你可以比对的内容仅限前端可控的请求方法、URL、自定义请求头、请求体字段

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