Angular 角度5不'；不包括http请求的头

我正在尝试非常简单的Angular5HTTP“GET”请求。当我检查chrome开发者工具时，我看不到http头

import { HttpClient, HttpHeaders } from '@angular/common/http';
   // ...

   const headers = new HttpHeaders(
      {
        'Authorization': 'Basic ' + btoa(user.username + ':' + user.password)
      }
    );
    this.http.get('xyz-url', { headers }).subscribe((data: any) => {
      // do something
    });

您可以在“网络选项卡”中看到

---

我建议您为此创建拦截器：

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  // ...

  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    request = request.clone({
      setHeaders: {
        Authorization: 'Basic ' + btoa(user.username + ':' + user.password)
      }
    });
    return next.handle(request);
  }
  // ...
}

@Injectable（）
导出类TokenInterceptor实现HttpInterceptor{
// ...
公共截获（请求：HttpRequest，下一步：HttpHandler）：可观察{
request=request.clone({
集合标题：{
授权：“基本”+btoa（user.username+：“+user.password）
}
});
下一步返回。处理（请求）；
}
// ...
}

将headers设置为header属性

this.http.get('xyz-url', { headers : headers }).subscribe((data: any) => {
  // do something
});

此外，请检查

网络

选项卡以查看请求的详细信息，如标题。

尝试此操作

从'@angular/common/http'导入{HttpHeaders}

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Authorization': 'my-auth-token'
  })
};

this.http.get('xyz-url', { httpOptions }).subscribe((data: any) => {
      // do something
});

---

阅读更多关于在

中添加http头的信息，我认为它可以解决您的问题

  import {
        HttpClient,
        HttpRequest,
        HttpHeaders
    } from '@angular/common/http';

@Injectable()
export class HttpService {

    constructor(private httpClient: HttpClient) {
    }
       /**
        * Request options.
        * @param headerOptions
        * @returns {RequestOptionsArgs}
        */

        private requestOptions(headerOptions?: any): any {
            let options = {
                        headers: new HttpHeaders({
                            "Authorization": "Bearer " + 
                             this.session.get('token),
                            "Content-Type": "application/json"
                        })
                    }

            } 
            return options;
        }
/**
     * This method is use for send GET http Request to API.
     * @param url - Additional request URL.
     * @param body - params.
     * @param options  - Header(s) which will pass with particular request.
     */
    get(url: string, options?: any): Observable<any> {

        return this.httpClient.get(url, this.requestOptions(options))
    }

导入{
HttpClient，
HttpRequest，
HttpHeader
}来自“@angular/common/http”；
@可注射（）
导出类HttpService{
构造函数（私有httpClient:httpClient）{
}
/**
*请求选项。
*@param头选项
*@returns{RequestOptionsArgs}
*/
私有请求选项（headerOptions？：any）：any{
让选项={
标题：新的HttpHeaders({
“授权”：“持票人”+
此.session.get（'令牌），
“内容类型”：“应用程序/json”
})
}
} 
返回选项；
}
/**
*此方法用于向API发送GET http请求。
*@param url-其他请求url。
*@param body-params。
*@param options-将随特定请求传递的标头。
*/
获取（url:string，options？：any）：可观察{
返回this.httpClient.get（url，this.requestOptions（options））
}

问题出在CORS上，他们先做选择再做获取。我的服务器没有预料到这一点。谢谢你的帮助