在 Angular 中添加标题“授权”答案

【问题标题】：Adding header 'Authorization' in Angular在 Angular 中添加标题“授权”
【发布时间】：2019-11-02 21:34:55
【问题描述】：

我想为每个请求设置标头。

我正在使用 request.clone 在 Angular 7.2.14 中设置标头

import { HttpInterceptor, HttpEvent, HttpRequest, HttpHandler, HttpResponse, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export class AuthInterceptor implements HttpInterceptor {


    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {        
        const token=localStorage.getItem('token');
        console.log(token);
        request.clone({ headers: request.headers.set('Authorization', token) });    
        return next.handle(request)
    }

}

我没有收到错误，但我可以看到授权标头

【问题讨论】：

您调用 request.clone() 但忽略了结果，即带有标头的新克隆请求。
已尝试但在控制台上出现错误，被 CORS 策略阻止
这是一个完全不同的问题。谷歌的 CORS。对飞行前请求的响应可能不允许授权标头。见developer.mozilla.org/en-US/docs/Web/HTTP/CORS
遇到同样的错误。
我已经告诉过你，这个错误是一个完全不同的问题。谷歌的 CORS。对飞行前请求的响应可能不允许授权标头。见developer.mozilla.org/en-US/docs/Web/HTTP/CORS。修复前端代码不会神奇地修复您的服务器配置。

标签： angular token interceptor

【解决方案1】：

您正在返回旧请求而不是克隆一个。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('token');
    request = request.clone({
        setHeaders: {
            Authorization: `Bearer ${token}`
        }
    });

    return next.handle(request);
}

【讨论】：

【解决方案2】：

request.clone() 返回一个对象，不会改变原点。

尝试将request.clone() 作为参数传递。

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {        
        const token=localStorage.getItem('token');
        console.log(token);    
        return next.handle(request.clone({ headers: request.headers.set('Authorization', token) });)
    }

【讨论】：

已尝试但被 CORS 政策阻止