Angular 12如何从API响应头的Location实现页面重定向？

问题原因 #

Angular的HttpClient默认会自动跟随HTTP 302重定向，导致你无法直接捕获到响应头中的Location字段，浏览器会直接执行重定向操作，因此出现"Failed to load response data: No content available because this request was redirected"的错误。

解决方案 #

通过HttpBackend（HttpClient的底层服务）发送请求，它不会自动处理重定向，这样就能获取到包含Location头的完整响应，之后再手动触发页面重定向。

1. 修改服务代码 #

在服务中注入HttpBackend，替换原有的HttpClient请求逻辑：

import { Injectable } from '@angular/core';
import { HttpBackend, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  private apiUrl = '你的API基础地址';

  constructor(private httpBackend: HttpBackend) { }

  submitForm(formData: any): Observable<string> {
    const request = new HttpRequest('POST', `${this.apiUrl}/submitPayment`, formData, {
      // 禁止自动重定向
      followRedirects: false
    });

    return this.httpBackend.handle(request).pipe(
      map((response: HttpResponse<any>) => {
        // 从响应头中获取Location字段
        return response.headers.get('Location') || '';
      })
    );
  }
}

2. 修改组件代码 #

在组件中订阅请求结果，拿到Location地址后手动触发页面重定向：

this.myService.submitForm(formData).subscribe(redirectUrl => {
  if (redirectUrl) {
    // 跳转到目标地址
    window.location.href = redirectUrl;
  } else {
    console.error('未获取到重定向地址');
  }
}, error => {
  // 处理请求错误，比如302以外的状态码
  console.error('请求失败:', error);
});

注意事项 #

• 确保API返回的Location头是完整的URL（包含协议、域名），如果是相对路径，需要拼接成完整地址再跳转。
• 若请求涉及跨域，需要确保后端配置了允许暴露Location头（通过Access-Control-Expose-Headers响应头），否则前端无法读取该字段。

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