Angular HttpClient为何将"\n"替换为"↵"？

我之前也碰到过类似的情况，Chrome 73的Network面板确实会把请求体里的\n显示成↵，这大多是DevTools的视觉显示优化，而非实际请求中换行符真的被替换了。不过如果你确实遇到了实际传输中换行符异常的情况，可以试试下面的解决方案：

先确认问题本质 #

首先可以做个验证：在Chrome的Network面板里，点击对应的POST请求，切换到Payload标签下的Raw视图，这里会显示请求体的原始内容。如果Raw里是\n，那只是DevTools的可视化显示问题，后端接收到的依然是正常的换行符；如果Raw里确实是↵，那才需要处理发送环节的问题。

解决方案 #

1. 手动控制请求序列化与请求头 #

Angular的HttpClient默认会自动序列化请求体，但有时候自动处理会导致字符异常。可以手动序列化并指定正确的Content-Type：

// 假设你的请求体是包含换行符的对象
const requestData = { content: "第一行\n第二行" };
// 手动序列化
const serializedBody = JSON.stringify(requestData);

this.http.post('/your-api-endpoint', serializedBody, {
  headers: new HttpHeaders({
    'Content-Type': 'application/json; charset=utf-8'
  })
}).subscribe(response => {
  // 处理响应
});

2. 处理FormData场景 #

如果是提交表单数据，直接使用FormData对象传递内容，避免自动序列化带来的问题：

const formData = new FormData();
// 直接传入包含\n的字符串
formData.append('content', "第一行\n第二行");

this.http.post('/your-form-endpoint', formData).subscribe(response => {
  // 处理响应
});

3. 自定义拦截器强制保留换行符 #

如果多个请求都有这个问题，可以写一个HttpInterceptor来统一处理请求体，确保换行符不被篡改：

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

@Injectable()
export class PreserveNewlinesInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    let modifiedBody = request.body;

    // 处理字符串类型的请求体
    if (typeof modifiedBody === 'string') {
      modifiedBody = modifiedBody.replace(/↵/g, '\n');
    } 
    // 处理对象类型的请求体，递归遍历替换字符串值里的异常换行符
    else if (modifiedBody && typeof modifiedBody === 'object' && !ArrayBuffer.isView(modifiedBody)) {
      modifiedBody = this.deepPreserveNewlines({ ...modifiedBody });
    }

    // 克隆请求并替换处理后的请求体
    if (modifiedBody !== request.body) {
      request = request.clone({ body: modifiedBody });
    }

    return next.handle(request);
  }

  private deepPreserveNewlines(obj: any): any {
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        const value = obj[key];
        if (typeof value === 'string') {
          obj[key] = value.replace(/↵/g, '\n');
        } else if (typeof value === 'object' && value !== null) {
          obj[key] = this.deepPreserveNewlines(value);
        }
      }
    }
    return obj;
  }
}

然后在你的AppModule里注册这个拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { PreserveNewlinesInterceptor } from './preserve-newlines.interceptor';

@NgModule({
  // ...其他配置
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: PreserveNewlinesInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

补充说明 #

Firefox Network面板里把↵显示成空格，同样是浏览器开发者工具的显示差异，实际传输的内容还是和你发送的一致。优先查看Raw视图来确认真实的请求体内容，不要被可视化的字符误导哦。

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