Angular 6：自定义标题“授权”不起作用 Angular 6答案

【问题标题】：Angular 6: Custom Header 'Authorisation' not working Angular 6Angular 6：自定义标题“授权”不起作用 Angular 6
【发布时间】：2018-07-13 17:09:00
【问题描述】：

我是 Angular 6 的新手，我在使用自定义标头进行授权时遇到了一个问题。我在 Authorization 标头中设置了一个 Oauth2 令牌，但它没有与请求一起进行。我做了很多谷歌搜索，但没有一个解决方案能解决我的问题。下面我添加代码。

请求中的自定义标头：

getCurrentUser() {
    let token = this.cookie.get('token');
    return this.http.get<User[]>(serverurl + 'getUser',{
        headers: new HttpHeaders().set('Authorization', token),
    }) // this.httpOptions
      .pipe(
      tap(user => this.log(`fetched current user`)),
      catchError(this.handleError('currentUser', []))
      );
  }

作为请求拦截器：

import { AuthService } from '../services/auth.service';
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { CookieService } from 'ngx-cookie-service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private auth: AuthService, private cookie: CookieService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        let token = this.cookie.get('token');
        let changedRequest = req;
        // HttpHeader object immutable - copy values
        const headerSettings: { [name: string]: string | string[]; } = {};

        if (token) {
            headerSettings['Authorization'] = 'Bearer ' + token;
        }
        // headerSettings['Content-Type'] = 'application/json';
        const newHeader = new HttpHeaders(headerSettings);
        changedRequest = req.clone({
            headers: newHeader
        });
        return next.handle(changedRequest);
    }
}

它给出以下请求：

授权令牌被添加到Access-control-request-Header 而不是Authorisation 本身。而且我在请求中没有看到授权标头。

在此先感谢...！

【问题讨论】：

标签： json oauth-2.0 httprequest angular6 custom-headers

【解决方案1】：

经过大量搜索后，我找到了解决方案：

代码没有问题，因为您使用的是Cross Origin请求，所以它首先向服务器发送了OPTIONS请求。为了解决这个问题，我在服务器配置部分添加了以下代码：

.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()

它与 Angular 6 无关。基本上，您需要对来自服务器端的所有 URL 启用 OPTIONS 方法。它会起作用。 :)

【讨论】：