如何在Angular 2中正确设置Http请求头

我有一个使用Angular 2的Ionic 2应用程序，它正在向ASP.NET核心API服务器发送Http PUT。以下是我用来发送请求的方法：

公共更新（学生：学生）：承诺
{
let headers=新的headers（）；
headers.append（'Content-Type'，'application/json'）；
append（'authentication'，`${student.token}`）；
常量url=`${this.studentsUrl}`；
返回此文件。http
.put（url，JSON.stringify（student），{headers:headers}）
.toPromise（）
.然后（（）=>学生）
.接住（这个.把手错误）；
}

我正在headers对象上设置身份验证密钥/值

但是，当我在服务器上收到此请求时，在标头上找不到身份验证密钥：

如图中所示，标头上有许多密钥，但没有我在客户端应用程序中手动添加到标头的内容和身份验证密钥

---

我做错了什么？

http.put（）中请求选项的参数实际上应该是RequestOptions类型。试着这样做：

this.http.get(this.urls.order + '&list', {
        headers: {
            'Cache-Control': 'no-cache',
        }
    }).subscribe((response) => { ...

let headers=new headers（）；
headers.append（'Content-Type'，'application/json'）；
append（'authentication'，`${student.token}`）；
let options=newrequestoptions（{headers:headers}）；
返回此文件。http
.put（url、JSON.stringify（学生）、选项）

您有一个输入错误

更改：

headers.append（'authentication'，${student.token}）

到：
headers.append（'Authentication'，student.token）

注意，认证是大写的
这应该通过从以下位置导入标题来轻松解决：

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

我们可以很好地使用它。你不必设置
所有服务中的选项既不管理所有错误响应，
只需定义2个拦截器（一个在发送
请求服务器，一个在发送服务器的
对您的服务的回应）

定义一个AuthInterceptor类，以便在将请求发送到服务器之前执行某些操作。您可以在此类中设置api令牌（从localStorage检索它，请参见步骤4）和其他选项


定义一个响应interceptor类，以便在将服务器响应发送到您的服务（httpClient）之前执行某些操作。您可以管理您的服务器响应，最常用的是检查用户的令牌是否有效（如果不清除本地存储中的令牌并重定向到登录）


在您的应用程序模块中从“@angular/common/HTTP”导入HTTP_拦截器。然后将拦截器（AuthInterceptor和responseInterceptor）添加到提供者中。这样做，你的应用程序会考虑所有HTTPclipse调用中的拦截器。


在登录http响应时（使用http服务），将令牌保存在
本地存储


然后对所有apirest服务使用httpClient


您可以在我的github项目上查看一些好的实践

角度4>
您可以选择手动设置头，，或者创建一个HTTP拦截器，在每次发出请求时自动设置头


人工
设置标题：

http
.post（'/api/items/add'，body{
headers:new HttpHeaders（）.set（'Authorization'，'my auth token'），
})
.subscribe（）；

设置标题：

this.http
.post（'api/items/add'，正文{
标题：新的HttpHeaders({
“授权”：“我的身份验证令牌”，
“x-header”：“x-value”
})
}).subscribe（）

局部变量（不可变再次实例化）

let headers=new-HttpHeaders（）.set（'header-name'，'header-value'）；
headers=headers.set（'header-name-2'，'header-value-2'）；
这是http
.post（'api/items/add'，body，{headers:headers}）
.subscribe（）

HttpHeaders类是不可变的，因此每个set（）都返回一个新实例并应用更改

从角度看


HTTP拦截器
@angular/common/http的一个主要特性是拦截，即声明位于应用程序和后端之间的拦截器的能力。当应用程序发出请求时，拦截器会在将请求发送到服务器之前对其进行转换，拦截器可以在应用程序看到响应之前对其进行转换。这对于从身份验证到日志记录的所有内容都很有用

从角度看

确保在整个应用程序中使用
@angular/common/http
。这样，拦截器将捕获您的请求

步骤1，创建服务：

import*作为“/../localstorage.items”中的lskey；
从“rxjs/Observable”导入{Observable}；
从“@angular/core”导入{Injectable}；
从'@angular/common/http'导入{HttpEvent，HttpInterceptor，HttpHandler，HttpRequest，HttpHeaders}；
@可注射（）
导出类HeaderInterceptor实现HttpInterceptor{
截取（请求：HttpRequest）

对于我们，我们使用了如下解决方案：

this.http.get(this.urls.order + '&list', {
        headers: {
            'Cache-Control': 'no-cache',
        }
    }).subscribe((response) => { ...

参考
将标头添加到单个请求的更简单且当前的方法是：

//第一步

const yourHeader: HttpHeaders = new HttpHeaders({
    Authorization: 'Bearer JWT-token'
});

//后请求

this.http.post(url, body, { headers: yourHeader });

//获取请求

this.http.get(url, { headers: yourHeader });

${student.token}
与student.token相同，但最后一个更简单。与url变量相同。请检查此处类型“Headers”不可分配给类型“Headers”。：这在angular 4上不起作用。它起作用，您只需要正确导入标题：“import{Headers}from'@angular/http'；”我已导入导入导入{Http，Response，RequestOptions，Headers}来自“@angular/Http”；，但无法在angular中设置头4@Suvonkar从以下文档中可以看到这一点：http.post（'/api/items/add'，body，{headers:new-HttpHeaders（）.set（'Authorization'），