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

Question

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

public update(student: Student): Promise<Student>
{
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('authentication', `${student.token}`);

    const url = `${this.studentsUrl}`;

    return this.http
        .put(url, JSON.stringify(student), { headers: headers })
        .toPromise()
        .then(() => student)
        .catch(this.handleError);
}

我正在标题对象上设置身份验证键/值。

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

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

我究竟做错了什么？

Answer 1

您在 http.put() 中请求选项的参数实际上应该是 RequestOptions 类型。 尝试这样的事情：

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('authentication', `${student.token}`);

let options = new RequestOptions({ headers: headers });
return this.http
    .put(url, JSON.stringify(student), options)

Answer 2

角 4 >

您可以选择手动设置标头，也可以制作一个HTTP 拦截器，在每次发出请求时自动设置标头。

---

手动

设置标题：

http
  .post('/api/items/add', body, {
    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
  })
  .subscribe();

设置标题：

this.http
.post('api/items/add', body, {
  headers: new HttpHeaders({
    'Authorization': 'my-auth-token',
    'x-header': 'x-value'
  })
}).subscribe()

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

let headers = new HttpHeaders().set('header-name', 'header-value');
headers = headers.set('header-name-2', 'header-value-2');

this.http
  .post('api/items/add', body, { headers: headers })
  .subscribe()

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

来自 Angular文档。

---

HTTP拦截器

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

来自 Angular 文档。

确保在整个应用程序中使用@angular/common/http 。 这样你的请求就会被拦截器捕获。

第一步，创建服务：

import * as lskeys from './../localstorage.items';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';

@Injectable()
export class HeaderInterceptor implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (true) { // e.g. if token exists, otherwise use incomming request.
            return next.handle(req.clone({
                setHeaders: {
                    'AuthenticationToken': localStorage.getItem('TOKEN'),
                    'Tenant': localStorage.getItem('TENANT')
                }
            }));
        }
        else {
            return next.handle(req);
        }
    }
}

第 2 步，将其添加到您的模块中：

providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HeaderInterceptor,
      multi: true // Add this line when using multiple interceptors.
    },
    // ...
  ]

---

有用的链接：

• 拦截器工作不正常。
• APP_INITIALIZER 不能与拦截器结合使用

Answer 3

我们可以使用Interceptors很好地做到这一点。 您不必在所有服务中设置选项，也不必管理所有错误响应，只需定义 2 个拦截器（一个在将请求发送到服务器之前执行某些操作，另一个在将服务器响应发送到您的服务之前执行某些操作）

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

2. 在将服务器响应发送到您的服务 (httpClient) 之前，定义一个responseInterceptor类来执行某些操作。 您可以管理您的服务器响应，最常见的用途是检查用户的令牌是否有效（如果不从 localStorage 清除令牌并重定向到登录）。

3. 在您的app.module 中，从“@angular/common/http”导入 HTTP_INTERCEPTORS。 然后向您的提供者添加拦截器（AuthInterceptor 和 responseInterceptor）。 这样做您的应用程序将考虑我们所有 httpClient 调用中的拦截器。

4. 在登录 http 响应（使用http服务）时，将令牌保存在 localStorage 中。

5. 然后将httpClient用于所有 Apirest 服务。

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

Answer 4

对我们来说，我们使用了这样的解决方案：

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

参考这里

Answer 5

这应该可以通过从 Angular 导入标头来轻松解决：

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

Answer 6

你有一个错字。

更改： headers.append('authentication', ${student.token});

至： headers.append('Authentication', student.token);

注意Authentication是大写的

Answer 7

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

// 第1步

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

// POST 请求

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

// 获取请求

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