Question

我根据本指南进行编码：https://angular.io/guide/http#configuring-other-parts-of-the-request。

我的代码如下：

loadMenuOptions(): void {
    console.log('this.currentApiKey |' + this.currentApiKey);
     let header = new HttpHeaders();
    header = header.set('api-key', this.currentApiKey);

    this.commonService. getMenuOptions(MENU_OPTIONS, header).subscribe(respuesta => this.setMenuOptions(respuesta));
  }

以下代码是我将此对象发送到服务器的时间：

getMenuOptions(endPoint: string, header: HttpHeaders): Observable<OptionsResponse> {
    console.log('header:' + JSON.stringify(header));
    return this.http.get<OptionsResponse>(endPoint,  header)
      .pipe(
        tap(res => this.log('getMenuOptions | status | ' + res.header.status)),
        catchError(this.handleError('getMenuOptions', null)));
  }

JSON.stringify 显示此值：
  头：{＆＃34; normalizedNames＆＃34;：[]，＆＃34; lazyUpdate＆＃34;：[{＆＃34;名称＆＃34;：＆＃34; API-键＆＃34;＆＃34;值＆＃34;：＆＃34; JEFE_HHHABBBJJJXXX＆＃34;＆＃34; OP＆＃34;：＆＃34; S＆＃34;}]，＆＃34;头＆＃34;：[]，＆＃34; lazyInit＆＃34; {＆＃34; normalizedNames＆＃34;：[]，＆＃34; lazyUpdate＆＃34;：空，＆＃34;头＆＃34;：[]}}

但是服务器没有收到＆＃39; api-key＆＃39;值。

我执行了具有相同值的POSTMAN，服务器正确接收了＆＃39; api-key＆＃39;值。

我做错了什么？

更新

此快照表示第一次调用＆＃39; getMenuOptions＆＃39;方法：first call to the server

此屏幕截图属于对服务器的第二次调用：

1st part of the 2nd call
2nd part of the 2nd call

正如您在第二个电话的第二部分所看到的那样，标题包含＆＃39; api-key＆＃39;价值是在“lazyUpdate”中发送的。对象

Answer 1

问题在于getMenuOptions方法的实施。您不尊重post中HttpClient方法的定义。

应该是这样的：

http
  .post('/api/items/add', body, {
    headers: new HttpHeaders().set('Authorization', 'my-auth-token'),
  }).

其中：

1st arguement: endpoint
2nd: request body
3rd: an object with the request config

目前，您将header对象作为第二个参数传递，并且不提供配置对象（第三个参数），因此您的请求自然不会按预期运行。

Answer 2

我在eTag标题时遇到了类似问题：这是 Cross Origin问题。

根据我的记忆，CORS只返回几个简单的标题，例如Cache-Control，Content-Language，Content-Type，Expires，Last-Modified等。

如果要返回特定标题，则必须添加另一个标题Access-Control-Expose-Headers，其中包含要随其返回的标题列表。因此，在您的情况下，Access-Control-Expose-Headers = 'api-key'。

您还需要更改后端以将相同的标头返回给Angular。

HttpHeader没有正确发送

2 个答案: