`xhr.getAllHeaders()` 在浏览器扩展上下文中缺少一些标题？

Posted 2023-05-07

【中文标题】`xhr.getAllHeaders()` 在浏览器扩展上下文中缺少一些标题？

【英文标题】：`xhr.getAllHeaders()` is missing some headers in a browser extension context?

【发布时间】：2021-12-13 00:52:58

【问题描述】：

我正在开发浏览器扩展程序。在弹出页面上运行的脚本中，我正在发出 ajax 请求。在xhr.onload 事件处理程序的第一行，我有console.log(xhr.getAllResponseHeaders())。但是，响应中的某些标头丢失了。我知道这可能是我的 manifest.json 文件的问题，所以在这里，删除了一些额外的细节：

  "manifest_version": 2,
  "name": "...",
  "version": "1.0",
  "description": "...",
  "options_ui":  "page": "options.html" ,
  "icons": 
    "16": "icons/favicon-16x16.png",
    "32": "icons/favicon-32x32.png"
  ,
  "browser_action": 
    "default_popup": "popup.html",
    "default_icon": "./icons/favicon-32x32.png"
  ,
  "key": "...",
  "permissions": ["identity"],
  "content_security_policy": "script-src 'self' https://unpkg.com https://apis.google.com https://www.gstatic.com https://www.googleapis.com https://securetoken.googleapis.com; object-src 'self'",
  "content_scripts": ["..."]

这些是实际的响应标头，根据网络调试选项卡：

HTTP/1.1 200 OK
Date: Wed, 27 Oct 2021 18:09:36 GMT
Server: WSGIServer/0.2 CPython/3.9.6
Content-Type: text/html; charset=utf-8
Hx-Trigger: setupLogin
X-Frame-Options: DENY
Content-Length: 220
Vary: Cookie, Origin
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: chrome-extension://kcegdmcjklppcfbmfjgkkomecpaofoec

但是，这是console.log(xhr.getAllResponseHeaders()) 在xhr.onloaded 事件处理程序的第一行的输出：

content-length: 220
content-type: text/html; charset=utf-8

CORS

我应该注意到我没有明显的 CORS 错误。我正在将 Django 与 django-cors-headers 库一起使用，并且我拥有所有这些标头，包括我试图调试的关键 Hx-Trigger 标头，特别是明确列为允许的标头（尽管我很确定该列表是只应该用于传入的请求标头，但无论如何）。

你知道为什么getAllResponseHeaders() 缺少这么多实际的标头吗？

【参考方案1】：

我想通了。您需要在 CORS 上下文中设置 Access-Control-Expose-Headers 标头，以便标头对客户端上执行的脚本可见。

相关MDN： https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers