【问题标题】：Custom Http headers in Angular 2 for every requestAngular 2 中针对每个请求的自定义 Http 标头
【发布时间】：2017-03-09 20:31:05
【问题描述】：

在我的 Angular 2 应用程序中，我尝试使用 Http (@angular/http) 向我的 API 发出请求。为了使这些请求正常工作，我需要将某些标头添加到我向 API 发出的每个请求中（包括 JWT 标头）。

我想做的是有一个 API 类来处理创建 Http 请求以及一些错误处理和验证等。

然而，事实证明，我不能使用 API 类中的 Http 类，因为它会出现以下错误；

user.service.ts

import { Injectable } from '@angular/core';
import {User} from "../models/User";
import {API} from "../API";
import {Http} from "@angular/http";

@Injectable()
export class UserService
{
    constructor (private http : Http) {}

    getProfile (user : User)
    {
        let api = new API (this.http);

        return api.doRequest ('/user/' + user.id + '/profile');
    }
}

API.ts

import {Http, Headers, RequestOptions} from '@angular/http';

export class API
{
    ...

    constructor (private http : Http) {}

    doRequest (url : string, method : string, data?)
    {
        let headers = {...};
        let options = new RequestOptions ({ headers: new Headers (headers), ... } );

        return this.http.get (url, data, options)
            .catch ((error) => { ... } );
    }
}

但是，直接从 UserService 使用 Http 会更好。

有没有办法解决这个问题，或者有更好的方法来达到预期的结果？我应该扩展 Http 吗？

【问题讨论】：

有什么原因你不能只在 API 类中使用 http，而根本不传递它（这看起来有点奇怪，我认为传递一个注入服务的实例...为什么不将其注入将要使用它的类）？你不需要调用 API.doRequest 吗？

标签： javascript angular typescript angular2-services angular2-http

【解决方案1】：

您应该使用 append() 方法添加标头，然后将其传递给请求对象，如下所示

 doRequest (url : string, method : string, data?)
    {
        headers= new Headers();
        headers.append(name1,value1);
        headers.append(name2,value2);
        ....
        let options = new RequestOptions ({ headers: headers, ... } );

        return this.http.get (url, data, options)
            .catch ((error) => { ... } );
    }

【讨论】：

我没有在Angular4中测试过

【解决方案2】：

这就是今天设置 HTTP 标头的方式（Angular > 4）：

进口：

import {HttpClient, HttpHeaders} from '@angular/common/http';

及用法：

const headers = new HttpHeaders()
    .set("X-CustomHeader", "custom header value");

请注意，我们通过链接连续的 set() 方法来构建 headers 对象。这是因为 HttpHeaders 是不可变的，它的 API 方法不会导致对象突变。

相反，对 set 的调用将返回一个包含新值属性的新 HttpHeaders 对象。所以这意味着以下内容将不起作用：

const headers = new HttpHeaders ();
headers.set("X-CustomHeader", "custom header value")

【讨论】：