Angular Http请求头映射为空

Angular Http请求头映射为空,angular,typescript,rxjs,Angular,Typescript,Rxjs,我正在尝试向api发送http请求,而api确实需要一个特定的头才能工作 直到现在,我尝试了一些不同的方式发送标题。起初,我试图在httpOptions对象中设置头并将其传递给我的`httpClient.get()`函数,但没有成功 因为我是angular和typescript的新手,所以我读了一些关于如何发送http请求的文章。拦截器应该是我的正确选择,我修改了我的代码 以下是我提出请求的功能: constructor(private http: HttpClient) {} public

我正在尝试向api发送http请求,而api确实需要一个特定的头才能工作

直到现在,我尝试了一些不同的方式发送标题。起初,我试图在httpOptions对象中设置头并将其传递给我的`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;
}
注意:
返回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);
    }
}
由于缺少请求标头,请求失败。 因此,对我来说,标题映射似乎是一个空映射。但是为什么,我的错误在哪里呢?

试着

const duplicate = req.clone({
setHeaders: {
        dummy-header: `dummy-heafer-info`
      }
});
headers:new-HttpHeaders().append('dummy-header','dummy-header-info')


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

如果为CORS调用其他域,则必须指定要访问的自定义头。也许这是后端修改,以实现选项响应的附加标题自定义标题允许后端与邮递员和其他前端系统完美配合为什么不以正常方式添加标题
this.http.get(url,{headers:this.headers})
正如我在问题中提到的,我在切换到拦截器之前做了,但它不起作用,什么不起作用?对我来说,它正常工作,你能再试一次吗?。同时检查后端可能出现的异常,并在那里发布。如果查看my console.log输出,则会设置标题,但不会在请求中设置标题。但是我还是尝试了,结果和以前一样。从你的console.log我只能在响应中看不到。您可以检查请求headerconsole.log(duplicate.headers.get('dummy-header')吗=>虚拟头信息是否在没有拦截器的情况下发送和接收响应?从提供程序中删除拦截器,并告诉我是,如果是,则结果完全相同。然后Alessandros回答我所代表的问题,但正如您确认的,控制台中没有跨源问题…假设HttpModule已正确导入,在这种情况下,您不会收到error,但只有标头将被隐藏。后端/前端必须具有“访问控制允许标头:”在options的标题中,请与您握手,了解此代码段,这可能会提供一些有限的、即时的帮助。A通过说明为什么这是一个很好的问题解决方案,并使其对将来有其他类似问题的读者更有用。请在您的回答中添加一些解释,包括您所做的假设。
const duplicate = req.clone({
setHeaders: {
        dummy-header: `dummy-heafer-info`
      }
});