Chrome浏览器扩展：使用Fetch API获取Content-Length报头返回null的原因

嘿，这事儿我之前踩过一模一样的坑！其实是Chrome扩展里Fetch API的特殊限制导致的，和Firefox、XHR的处理逻辑差异很大：

• Chrome的Fetch API在扩展环境下发起跨源请求时，哪怕你已经配置了<all_urls>权限，它依然严格遵循CORS规则——只有服务器通过Access-Control-Expose-Headers响应头明确暴露的字段，才能被response.headers.get()读取到。content-length属于非CORS安全响应头，不在默认暴露的列表里，所以你拿到的就是null。
• Firefox的扩展对Fetch API的权限更宽松，直接赋予了它和XHR一样的扩展特权，所以不需要额外配置就能读取这类头。
• 至于XMLHttpRequest，Chrome在扩展上下文里给它开了特权通道，不受CORS的这个限制，所以能直接拿到content-length。

解决办法 #

你可以根据自己的实际情况选一种：

1. 修改服务器配置：如果能控制目标服务器，在响应头里加上Access-Control-Expose-Headers: Content-Length（HTTP头不区分大小写，但尽量和实际返回的字段名一致），这样Fetch就能正常读取这个值了。
2. 换用Chrome扩展专属API：如果没法改服务器，除了继续用XHR，还可以用chrome.webRequest来拦截响应头获取值，示例代码：

chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    const contentLengthHeader = details.responseHeaders.find(
      header => header.name.toLowerCase() === 'content-length'
    );
    console.log(contentLengthHeader?.value);
  },
  { urls: ["http://example.com/*"] },
  ["responseHeaders"]
);

记得在扩展清单里添加webRequest权限哦。

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