angular - Http 请求头映射为空

Question

我正在尝试向 api 发送 http 请求，而 api 确实需要特定的 header 才能工作。

到目前为止，我尝试了一些不同的方式来发送 header 。起初，我尝试在 httpOptions 对象中设置 header 并将它们传递给我的“httpClient.get()”函数，但这没有用。

因为我对 Angular 和 TypeScript 还很陌生，所以我阅读了一些关于如何发送 http 请求的文章。拦截器应该是适合我的正确方法，我修改了我的代码。

这是我发出请求的函数:

constructor(private http: HttpClient) {}

public getVersions() {
    let url = baseUrl + '/docs/versions';

    this.http
        .get(url)
        .subscribe(data =>{
            console.log(data);
        }, err => {
            console.log(err);
        });

    return true;
}

注意:return true;这里只是为了测试

这是我的拦截器

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHeaders, HttpHandler, HttpRequest, HttpEvent, HttpResponse }
    from '@angular/common/http';

import { Observable } from 'rxjs';
import 'rxjs';

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {
    intercept(
        req: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {

        console.log('intercept http request');
        const duplicate = req.clone({
            headers: new HttpHeaders().set('dummy-header', 'dummy-header-info')
        });

        console.log(duplicate.headers.get('dummy-header');
        console.log('new header request');

        return next.handle(duplicate);
    }
}

这是我的控制台日志

intercept http request
http-interceptor.ts:19 dummy-header-info
http-interceptor.ts:20 new header request
zone.js:2969 OPTIONS http://192.168.111.106:8089/docs/versions 0 ()
api.service.ts:21 
HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
error : ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
headers : HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message : "Http failure response for (unknown url): 0 Unknown Error"
name : "HttpErrorResponse"
ok : false
status : 0
statusText : "Unknown Error"
url : null
__proto__ : HttpResponseBase

由于缺少请求 header ，请求失败。所以对我来说，标题 map 看起来像是一张空 map 。但是为什么，我的错误在哪里？

Answer 1

headers: new HttpHeaders().append('dummy-header', 'dummy-header-info')

或 const duplicate = req.clone({ setHeaders: { dummy-header: 'dummy-heafer-info' } });