Angular应用中如何编码所有出站请求体（含标准JSON）？

Since you can't modify Angular's internal HttpRequest.serializeBody method, the cleanest and most maintainable approach is to use an HTTP interceptor to intercept and modify requests before they're sent to the server. This way, you can apply your encoding logic to all outgoing requests uniformly without changing every HttpClient call in your app.

Step 1: Create the Request Encoder Interceptor #

Generate an interceptor using the Angular CLI (or create the file manually):

ng generate interceptor interceptors/request-encoder

Replace the generated code with this implementation, which handles JSON bodies and applies your desired encoding:

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

@Injectable()
export class RequestEncoderInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // Skip requests without a body or non-JSON content types
    if (!request.body || !this.isJsonRequest(request)) {
      return next.handle(request);
    }

    // Serialize the body to JSON (matches Angular's default behavior)
    const serializedBody = typeof request.body === 'string' 
      ? request.body 
      : JSON.stringify(request.body);

    // Apply your encoding logic here (replace with your preferred method)
    const encodedBody = this.encodeBody(serializedBody);

    // Clone the request with the encoded body and update headers
    const encodedRequest = request.clone({
      body: encodedBody,
      headers: request.headers.set('Content-Type', this.getEncodedContentType())
    });

    return next.handle(encodedRequest);
  }

  /** Check if the request is sending JSON data */
  private isJsonRequest(request: HttpRequest<unknown>): boolean {
    const contentType = request.headers.get('Content-Type');
    return contentType?.includes('application/json') ?? false;
  }

  /** Replace this with your actual encoding logic (e.g., base64, URL encoding) */
  private encodeBody(body: string): string {
    // Example: Base64 encoding (note: handles ASCII only; use a library for Unicode)
    return btoa(body);

    // Alternative: URL encoding
    // return encodeURIComponent(body);
  }

  /** Update this to match your server's expected content type for encoded data */
  private getEncodedContentType(): string {
    // For base64-encoded JSON
    return 'application/json; encoding=base64';

    // For URL-encoded JSON
    // return 'application/x-www-form-urlencoded';
  }
}

Step 2: Register the Interceptor in Your App Module #

Add the interceptor to your app's provider array so Angular uses it for all HTTP requests:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { RequestEncoderInterceptor } from './interceptors/request-encoder.interceptor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: RequestEncoderInterceptor,
      multi: true // Allows multiple interceptors to be registered
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Key Details & Customization #

• Targeted Processing: The interceptor only modifies requests with a body and application/json content type, so it won't interfere with FormData, Blobs, or other non-JSON requests.
• Encoding Flexibility: Replace the encodeBody method with your specific encoding logic (e.g., base64, URL encoding, or a custom algorithm).
• Server Compatibility: Update the getEncodedContentType method to return a header value your server understands. This tells the server how to decode the request body.
• Unicode Handling: If you need to encode Unicode characters, avoid btoa() directly. Instead, use:

  private encodeBody(body: string): string {
    return btoa(encodeURIComponent(body));
  }
  

  And on the server side, decode with decodeURIComponent(atob(encodedBody)).

Edge Cases to Consider #

• Requests with Pre-Serialized Bodies: If you pass a string directly to HttpClient (instead of an object), the interceptor will encode that string without re-serializing it.
• Non-JSON Bodies: To handle other content types (like application/x-www-form-urlencoded), extend the isJsonRequest check and add separate encoding logic for those cases.
• Error Handling: Add try/catch blocks around serialization/encoding if you expect invalid JSON or encoding failures, and handle those errors gracefully (e.g., log them and pass the original request through).

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