Angular 6:自定义 Header 'Authorisation' 无效 Angular 6
Angular 6: Custom Header 'Authorisation' not working Angular 6
我是 Angular 6 的新手,我在自定义 header 授权方面遇到了一个问题。我在 Authorization header 中设置了一个 Oauth2 令牌,但它不符合请求。我做了很多谷歌搜索,但 none 的解决方案解决了我的问题。下面我正在添加代码。
请求中的自定义 header:
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
本身。我在请求中没有看到授权 header。
提前致谢...!
经过大量搜索后,我找到了解决方案:
代码没有问题,因为您使用的是 Cross Origin
请求,它首先向服务器发送了 OPTIONS
请求。为了解决这个问题,我在服务器配置部分添加了以下代码:
.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
它与 Angular 无关 6. 基本上您需要为服务器端的所有 URL 启用 OPTIONS 方法。它会起作用的。 :)
我是 Angular 6 的新手,我在自定义 header 授权方面遇到了一个问题。我在 Authorization header 中设置了一个 Oauth2 令牌,但它不符合请求。我做了很多谷歌搜索,但 none 的解决方案解决了我的问题。下面我正在添加代码。
请求中的自定义 header:
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
本身。我在请求中没有看到授权 header。
提前致谢...!
经过大量搜索后,我找到了解决方案:
代码没有问题,因为您使用的是 Cross Origin
请求,它首先向服务器发送了 OPTIONS
请求。为了解决这个问题,我在服务器配置部分添加了以下代码:
.antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
它与 Angular 无关 6. 基本上您需要为服务器端的所有 URL 启用 OPTIONS 方法。它会起作用的。 :)