浏览器扩展中xhr.getAllResponseHeaders()缺失响应头如何解决？

你遇到的响应头缺失是浏览器同源策略的标准限制，和扩展配置、CORS配置的两个遗漏点有关：

• CORS响应头暴露规则限制：默认情况下，前端JS只能读取6类CORS安全列出的简单响应头：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，其余所有响应头（包括你需要的Hx-Trigger）都需要后端显式配置Access-Control-Expose-Headers头才能允许JS读取，你之前配置的入站请求头允许列表和这个规则完全无关。
• 扩展跨域权限未配置：浏览器扩展如果在permissions中声明了目标请求域名的权限，发起的请求会豁免普通页面的CORS限制，直接读取完整响应头，你当前的permissions仅配置了identity，没有添加对应请求域名的权限。

另外浏览器网络面板展示的是完整的原始响应头，不受JS读取权限限制，所以会出现面板能看到但getAllResponseHeaders()拿不到的差异。

你可以任选其一解决：

方案1：修改后端CORS配置 #

在Django的django-cors-headers配置中新增CORS_EXPOSE_HEADERS项，把你需要读取的响应头全部加入列表即可：

CORS_EXPOSE_HEADERS = [
    "Hx-Trigger",
    "Date",
    "Server",
    "X-Frame-Options",
    "X-Content-Type-Options",
    # 其他需要读取的响应头
]

配置后后端会返回对应的Access-Control-Expose-Headers响应头，浏览器就会允许JS读取这些头。

方案2：修改扩展manifest配置 #

在manifest.json的permissions数组中添加你请求的目标域名匹配规则，例如你请求的接口域名是https://api.example.com，就按如下配置：

"permissions": ["identity", "https://api.example.com/*"]

配置后扩展的跨域请求会享有特殊权限，不需要依赖后端CORS配置就能读取完整响应头。

内容的提问来源于stack exchange，提问作者jdevries3133