如何使用 Angular 5 传递 header 数据？

Question

这在 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());
}

Answer 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 })

Answer 2

headers 可以作为 HttpHeaders 或 Plain JSON object 传递，但它应该是 HttpOptions 的一部分。您可以在 Angular 的官方文档 https://angular.io/guide/http#adding-headers

上找到更多相关信息

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

Answer 3

这里是问题的详细答案：

Pass data into the HTTP header from the Angular side (Please note I am using Angular4.0+ in the application).

我们可以通过多种方式将数据传递到 header 中。语法不同，但意思相同。

// 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)

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

不过，如果您遇到类似问题...（您可能需要更改 backend/WebAPI 一侧）

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

在 https://whosebug.com/a/52620468/3454221

找到我的详细答案

如何使用 Angular 5 传递 header 数据？

How do I pass header data with Angular 5?

http-headers

angular

angular-httpclient