如何使用 Angular 5 传递标头数据？答案

【问题标题】：How do I pass header data with Angular 5?如何使用 Angular 5 传递标头数据？
【发布时间】：2018-09-26 21:03:33
【问题描述】：

这在 Angular 4 中有效。我要改变什么才能让它在 Angular 5 中工作？

 getGreeting(): Observable<string> {
    let headers = new Headers({ 'Authorization': 'Bearer ' + this.authenticationService.token });

  //cant find requestoptions
  let options = new RequestOptions({ headers: headers });

    return this.http.
        get(Constant.ApiRoot + Constant.GreetingService, options).
        map((response: Response) => response.text());
}

【问题讨论】：

应该是一样的。你试过了吗

标签： angular http-headers angular-httpclient

【解决方案1】：

这是我的HttpClient.post 和.get 使用的

let headers = new HttpHeaders({
            'Content-Type': 'application/json',
            'responseType': 'json'
        });

this.http.post("url", { SomeDate: data }, { headers: headers })
this.http.get("url", { headers: headers })

【讨论】：

这是给http的。从 Angular 5 开始，建议您改用http-client。
@PareshLomate 已修改。

【解决方案2】：

标头可以作为 HttpHeaders 或普通 JSON 对象传递，但它应该是 HttpOptions 的一部分。你可以在 Angular 的官方文档https://angular.io/guide/http#adding-headers中找到更多相关信息

const httpOptions = {
      headers: new HttpHeaders({      
        'Authorization': Bearer ' + this.authenticationService.token 
      })
    };
this.httpClientObj.get('url',httpOptions);

【讨论】：

【解决方案3】：

以下是问题的详细答案：

从 Angular 端将数据传递到 HTTP 标头（请注意，我是在应用程序中使用 Angular4.0+）。

我们可以将数据传递到标头中的方法不止一种。语法不同，但意思都一样。

// Option 1 
 const httpOptions = {
   headers: new HttpHeaders({
     'Authorization': 'my-auth-token',
     'ID': emp.UserID,
   })
 };


// Option 2

let httpHeaders = new HttpHeaders();
httpHeaders = httpHeaders.append('Authorization', 'my-auth-token');
httpHeaders = httpHeaders.append('ID', '001');
httpHeaders.set('Content-Type', 'application/json');    

let options = {headers:httpHeaders};


// Option 1
   return this.http.post(this.url + 'testMethod', body,httpOptions)

// Option 2
   return this.http.post(this.url + 'testMethod', body,options)

在调用中，您可以找到作为标题传递的字段，如下图所示：

不过，如果您遇到类似的问题......（您可能需要更改后端/WebAPI 端）

对预检请求的响应未通过访问控制检查：否 ''Access-Control-Allow-Origin'' 标头出现在请求的资源上。因此不允许使用原点 ''http://localhost:4200'' 访问
预检响应没有 HTTP ok 状态。

在https://stackoverflow.com/a/52620468/3454221找到我的详细答案

【讨论】：