Angular 无法从 HttpEvent 标头获取 ETag 标头

Posted 2023-02-19

【中文标题】Angular 无法从 HttpEvent 标头获取 ETag 标头

【英文标题】：Angular Cannot get ETag header from HttpEvent header

【发布时间】：2021-07-06 05:14:47

【问题描述】：

我正在尝试读取 PUT 返回到 AWS S3 的 ETag HTTP 标头，但它在 Angular 打字稿中不可用（它在浏览器 HTTP 响应中）。我已将它添加到 ExposeHeaders CORS 并在 Access-Control-Expose-Headers 标头和 ETag 标头中返回，但我仍然无法读取它！！！

这是我的 CORS 配置：

    
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag"
        ],
        "MaxAgeSeconds": 10
    
]

这是我的 HTTP 响应标头：

x-amz-id-2: <blah>
x-amz-request-id: <blah>
Date: Sat, 10 Apr 2021 15:07:04 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, PUT, POST
Access-Control-Expose-Headers: ETag
Access-Control-Max-Age: 10
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
ETag: "f58<blah>6ae"
x-amz-server-side-encryption: AES256
Content-Length: 0
Server: AmazonS3

这是我的 HTTPEvent 响应（我正在观察事件）控制台日志（我通过观察响应得到相同的标头详细信息）：

Agular console log of response headers

关于这个主题有很多问题，但我没有看到任何 HTTP 响应标头似乎允许 ETag 标头，但无论如何都无法从 Angular 读取。

非常感谢

【问题讨论】：

i.stack.imgur.com/isss4.png 不显示响应标头。相反，它显示了请求的一些细节——从控制台看，它看起来像。要查看响应标头，您需要改用 devtools 中的 Network 窗格。

仅供参考，该图像旨在显示来自 Angular 的控制台日志（根据标签）。实际收到的响应标头（从浏览器开发人员工具的网络选项卡复制）显示在上方的“响应标头”标题下。

【参考方案1】：

在响应头中添加Access-Control-Expose-Headers:ETag可以解决这个问题。

【讨论】：

已经完成，根据问题。除非它也应该添加到其他地方？

你的问题不在于角度 HttpClient，因为在规范中明确指出“Access-Control-Expose-Headers 响应标头允许服务器指示哪些响应标头应可用于 脚本 i> 在浏览器中运行”，你检查通配符了吗？

嗨 Mehdi，根据原始问题，Access-Control-Expose-Headers 设置为允许 ETag。我不能在上面使用通配符，因为 S3 不允许我这样做。缺少一个错字（完全可能）我很难过。在问题中，我列出了收到的响应标头，其中包括 Access-Control-Expose-Headers: ETag,.

【参考方案2】：

好的，问题是，我不知道标头不会自动成为响应对象的一部分，您可以通过两种方式获取它们：

response.headers.keys() 返回标题键数组 response.headers.get('') 返回标头值。

现在可以了！