Question

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

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

我在header对象上设置了身份验证密钥/值。

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

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

我做错了什么？

Answer 1

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

userNotification(_:didReceive:withCompletionHandler:)

Answer 2

Angular 4＆gt;

您可以选择设置标题手动，也可以选择 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 docs。

HTTP拦截器

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

来自Angular docs。

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

第1步，创建服务：

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.
    },
    // ...
  ]

有用的链接：

Answer 3

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

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

Answer 4

我们可以使用Interceptors很好地完成。你不必设置您所有服务中的选项都不会管理您的所有错误响应，只需定义2个拦截器（一个在发送之前做一些事情在发送服务器之前请求服务器和一个做某事回应您的服务）

定义 AuthInterceptor 类，以便在将请求发送到服务器之前执行某些操作。您可以设置api令牌（从localStorage检索它，请参阅步骤4）以及此类中的其他选项。
定义 responseInterceptor 类，以便在将服务器响应发送到您的服务（httpClient）之前执行某些操作。您可以管理服务器响应，最常见的用途是检查用户的令牌是否有效（如果不是从localStorage清除令牌并重定向到登录）。
在 app.module 中从'@ angular / common / http'导入HTTP_INTERCEPTORS。然后向您的提供程序添加拦截器（AuthInterceptor和responseInterceptor）。这样做你的应用程序将在我们所有的httpClient调用中考虑拦截器。
在登录http响应（使用 http 服务）时，将令牌保存在 localStorage的。
然后使用 httpClient 获取所有最苛刻的服务。

您可以在我的github proyect here

Answer 5

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

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

参考here

Answer 6

你有一个错字。

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

收件人： headers.append('Authentication', student.token);

注意身份验证是大写的

Answer 7

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

//步骤1

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

// POST请求

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

// GET请求

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

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

7 个答案:

Angular 4＆gt;

手动

HTTP拦截器