Angular CORS 上缺少 5 个响应 header

Question

在我的 angular 应用中，我需要从响应 header 中检索位置数据。服务器 (Nginx) 配置为允许跨源和到 header 中的 allow/expose 位置。我可以在 chrome DEV 控制台中看到这一点，但在我的 angular 应用程序中，我没有看到 header.

的任何数据

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

这是我的代码片段。

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) returns 未定义。

这里出了什么问题？

Answer 1

新的 HttpClient returns 默认只有主体。如果您想从响应本身检索任何内容，您可以使用选项 observe:

  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 没有发现您的错误。最好像我的示例一样删除类型，以便自动正确输入。

Answer 2

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

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

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

Angular CORS 上缺少 5 个响应 header

Angular 5 response header is missing on CORS

cors

response-headers

angular5