Angular中如何获取POST 201响应的Location头值

云原生阿岚

2026-8-6

解决方案

1. 修正CORS配置（关键前提）

你当前设置的Access-Control-Allow-Headers是允许请求头携带location字段，但要让前端能读取响应头里的Location，服务器必须配置Access-Control-Expose-Headers: Location——因为浏览器默认只允许前端访问少数几种响应头，Location不在其中，必须显式暴露。

修改service.ts中的配置：

Access-Control-Expose-Headers: Location

2. 调整RxJS代码逻辑（适配新版本+满足需求）

Angular 6+配套的RxJS已改用pipeable操作符，flatMap也更名为mergeMap，且你的需求是将Location传入另一个POST请求而非GET。调整Contractadd.ts的代码：

// 先导入所需操作符
import { mergeMap } from 'rxjs/operators';

// 替换原有请求代码
return this.restApi.post(this.contract, body, options).pipe(
  mergeMap((res: Response) => {
    // 从响应头获取Location值
    const location = res.headers.get('Location');
    // 调用saveNote的POST请求，传入获取到的location和笔记数据
    // 请将yourNoteData替换为实际要提交的笔记对象
    return this.restApi.saveNote(yourNoteData, location);
  }),
  catchError(this.handleError)
);

3. 修复saveNote方法的变量问题

原saveNote方法中Location是未定义的变量，需要将获取到的location作为参数传入并拼接至请求URL：

// service.ts中的saveNote方法
public saveNote(note: any, location: string): Observable<any> {
  // 拼接正确的请求地址
  const requestUrl = `${this.apiURL}/contract/api/notes/${location}`;
  return this.http.post<any>(
    requestUrl,
    note, // HttpClient会自动序列化对象，无需手动JSON.stringify
    this.httpOptions
  ).pipe(
    retry(1),
    catchError(this.handleError)
  );
}