无法在Ionic Angular应用程序中从HttpClient读取HttpResponse中的自定义标头

Question

我正在请求创建新资源的端点，并返回包含带有新创建资源的“Location”标头的201响应：

但是，当我尝试按Angular guide中所述获取标头值时，我得到一个“null”值而不是实际值。这是我的代码（注意：我正在设置responseType：'text'以避免Json解析错误，因为响应主体为空）：

(...)
import { HttpClient } from '@angular/common/http';

(...)

  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient) {
  }

  ionViewDidLoad() {
    let obj = {nome : "SomeName"}
    this.http.post("http://localhost:8080/categorias", obj, {observe: 'response', responseType: 'text'})
    .subscribe(
        (resp) => {
          console.log(resp.headers.get('Location'));
        }
      );
  }

我甚至尝试过console.log（resp.headers）来检查这个对象，它显示了一个完全不同的结构：

如何从新的HttpClient Angular API中获取HttpResponse对象的自定义标头？

Answer 1

我在eTag标题时遇到了类似问题：这是 Cross Origin问题。

根据我的记忆，CORS只返回几个简单的标题，例如Cache-Control，Content-Language，Content-Type，Expires，Last-Modified等。

如果要返回特定标题，则必须添加另一个标题Access-Control-Expose-Headers，其中包含要与其一起返回的标题列表。因此，在您的情况下，Access-Control-Expose-Headers = 'location'。

您还需要更改后端以将相同的标头返回给Angular。

希望这有帮助！

Answer 2

我也有这个问题。就我而言，我只看到了Content-Type，Pragma和Expiration标题。

事实上，这不是一个角度问题。没有您期望的标题的原因是CORS。

在API上添加'access-control-expose-headers' : 'Location'可以解决您的问题：）

Answer 3

        Response.Headers.Append("myCaptchaName", "value");


services.AddCors(options =>
        {
            options.AddPolicy("AllowMyOrigin",
                builder => builder.WithOrigins("http://localhost:4200").AllowAnyHeader().
                AllowAnyMethod().AllowCredentials()
                .WithExposedHeaders("myCaptchaName"));
        });
        services.Configure<MvcOptions>(options =>
        {
            options.Filters.Add(new CorsAuthorizationFilterFactory("AllowMyOrigin"));
        });