如何在 Angular2 中设置默认的 HTTP 标头？答案

【问题标题】：How to set default HTTP header in Angular2?如何在 Angular2 中设置默认的 HTTP 标头？
【发布时间】：2016-04-30 09:16:37
【问题描述】：

我知道如何使用 Headers class 为单个 HTTP 调用设置标头。

有没有办法为所有 HTTP 调用做到这一点？

【问题讨论】：

标签： angular

【解决方案1】：

我看到了两种方法：

选项#1：使用BaseRequestOptions 类

您可以扩展这个类并设置每个请求使用的标头：

@Injectable()
export class DefaultRequestOptions extends BaseRequestOptions{
    headers:Headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
}

并按如下所述进行注册：

bootstrap(AppComponent,[
    HTTP_PROVIDERS,
    provide( RequestOptions, { useClass: DefaultRequestOptions })
});

选项 #2：扩展 Http 类本身

您还可以扩展Http 类并在其中设置所需的标题，如下所述：

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options);        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    // Add headers into options
    (...)
    return super.get(url, options);
  }

  (...)
}

并按如下所述进行注册：

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(Http, {
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
    deps: [XHRBackend, RequestOptions]
  })
]);

希望对你有帮助蒂埃里

【讨论】：

有没有办法可以修改服务中的可观察返回。就像更改请求开始或完成时发生的情况一样？我们将如何做到这一点？
总之我们可以修改返回的observable吗？
使用选项 2，这里是关于通过扩展 Http 类添加默认 http 标头（并捕获 http 错误）的综合指南 - adonespitogo.com/articles/angular-2-extending-http-provider
选项 #1 - 为当前的 Angular 版本更新 - 如果您关心标头（和其他请求选项），这是一种更容易的方法。 Angular 官方文档推荐它（HTTP guide 会在几天后这么说）。完整的请求和响应拦截是另一回事。有一个用于此目的的文档。请继续关注（2017 年 1 月左右）。

【解决方案2】：

您不能将 $httpProvider 之类的东西用于 angular1，但您可以创建自己的 CustomHttp 类，该类扩展/包装默认的 Http 并添加您的标题。

看看来自angular2-jwt库的AuthHttp源代码： https://github.com/auth0/angular2-jwt/blob/master/angular2-jwt.ts

【讨论】：