CORS 上缺少 Angular 5 响应标头答案

【问题标题】：Angular 5 response header is missing on CORSCORS 上缺少 Angular 5 响应标头
【发布时间】：2018-06-15 11:22:15
【问题描述】：

在我的 Angular 应用程序中，我需要从响应标头中检索位置数据。服务器 (Nginx) 配置为允许跨源并允许/在标头中公开位置。我可以在 chrome DEV 控制台中看到这一点，但在我的 Angular 应用程序中，我没有看到任何标题数据。

Access-Control-Allow-Origin: *
Access-Control-Allow-Headers:Location, Content-Type
Access-Control-Expose-Headers:Location, Content-Type

这是我的代码 sn-p。

this.httpClient.post( url, {
        UserName: username,
        Password: password
      }
    )
      .subscribe(
        (res: Response) => {
          console.log(res.headers);
        },
        error => {console.log('Error occured::' + error);
        }
      );

console.log(res.headers) 返回未定义。

这里出了什么问题？

【问题讨论】：

标签： cors angular5 response-headers

【解决方案1】：

新的 HttpClient 默认只返回正文。如果您想从响应本身中检索任何内容，您可以使用选项观察：

  this.httpClient.post(url, {
    UserName: username,
    Password: password
  }, {
    observe: 'response'
  })
  .subscribe(res => {
    console.log(res.headers.get('Location');
  }, error => {
    console.log('Error occured::' + error);
  });

您将 res 类型转换为 Response，因此 TypeScript 没有发现您的错误。最好像我的示例中那样删除类型，以便自动正确键入。

【讨论】：

感谢您的回复。我在标题中只看到“Content-Type”。位置丢失。
您能否发布服务器为预检 (OPTIONS) 请求和实际请求本身返回的所有标头？
我在 DEV 控制台的网络中看到预检响应标头。它返回 200。之后，它返回带有代码 201 的实际响应标头，该标头在标头中具有位置。但我无法在 Angular 中得到它。我在控制台中看到下面。 HttpHeaders {normalizedNames: Map(0), lazyUpdate: null,lazyInit: ƒ} 标头 Map(1) 大小 : (...) proto : Map [[Entries]] Array(1) lazyInit null lazyUpdate : null normalizedNames Map(1) {"content-type" => "content-type"} proto
Nginx 服务器配置中可能缺少某些内容？
是的，您的 CORS 标头可能不完整。要检查，您能否发布服务器为预检（OPTIONS）请求和实际请求本身返回的所有标头？请注意，Access-Control-Expose-Headers 应该只由实际请求返回，而不是由预检返回。

【解决方案2】：

好的。有两个问题。正如@Manduro 指出的那样，需要在角度请求中添加观察。另一个是我错过了两种标题类型之间的逗号。

https://enable-cors.org/server_nginx.html

需要在位置配置文件中添加'always'关键字

【讨论】：