如何在 Angular2 中设置全局自定义标头？

Posted 2023-02-21

【中文标题】如何在 Angular2 中设置全局自定义标头？

【英文标题】：How do you set global custom headers in Angular2?

【发布时间】：2016-04-02 19:50:38

【问题描述】：

我想在我对 Angular2 后端的所有请求中设置标头 Content-type: application/json。我在我的主要app.js 文件中使用它。

let headers = new Headers(
    'Content-Type', 'application/json'
)
class MyOptions extends BaseRequestOptions 
  headers: headers 


bootstrap(App, [
  provide(RequestOptions, useClass: MyOptions),
  ROUTER_BINDINGS,
  HTTP_PROVIDERS,
  bind(APP_BASE_HREF).toValue('/')
])

我希望 Http 的所有使用都使用新的内容类型，但此代码仍将内容类型设置为 text/plain

saveMaster (master) 
  return this.http
    .put(`$config.API_URL/masters/$master._id`, JSON.stringify(master))
    .map(res => res.json())

我必须手动设置每个请求的标头才能使其正常工作。我做错了吗？

注意：我想全局设置一个标头选项，不必像this solution 中的每个请求类型一样设置它。

【问题讨论】：

Angular2 - set headers for every request的可能重复

@MarkRajcok 这个答案仍然是手动为每种类型的请求设置自定义标头。明天我会尝试 alexpods 解决方案。

【参考方案1】：

将MyOptions更改为：

class MyOptions extends RequestOptions 
  constructor()  
    super( 
      method: RequestMethod.Get,
      headers: new Headers(
        'Content-Type': 'application/json',
        'X-Some-Header': 'some-content'
      );
    );
  

将provide(RequestOptions, useClass: MyOptions) AFTER HTTP_PROVIDERS（否则将使用默认BaseRequestOptions 代替您的MyOptions）。

bootstrap(App, [
  // ...
  HTTP_PROVIDERS,
  provide(RequestOptions, useClass: MyOptions) // <- after HTTP_PROVIDERS!!!
])

见this plunk

【讨论】：

这很好用。遗憾的是，这不适用于动态标头（例如：取决于可能更改的 cookie 的标头）。构造函数只会在加载时评估一次。

对于动态标头，您可以扩展http类并修改request方法为每个请求添加自定义标头。我为此编写了一份综合指南 - adonespitogo.com/articles/angular-2-extending-http-provider

对于 NG4+（我目前使用 Angular 6）这个答案对我有用 => ***.com/questions/34464108/…