Chrome扩展：背景脚本与内容脚本的CORS差异及同源疑问

同源判断结论 #

http://example.org 和 chrome-extension://faebbackmmlgdbgjmljofnijfdfaepbo 不属于同源。

同源策略的判定标准是协议、域名（或扩展ID）、端口三者完全一致：

• http://example.org 的协议为http，域名为example.org，默认端口80
• chrome-extension协议的地址，协议是chrome-extension，"域名"是扩展的唯一IDfaebbackmmlgdbgjmljofnijfdfaepbo，两者协议、标识完全不同，因此不属于同源。

内容脚本的CORS限制 #

内容脚本是注入到目标网页（此处为http://example.org）的环境中运行的，它发起的请求会继承宿主页面的Origin，也就是http://example.org：

Referrer Policy: strict-origin-when-cross-origin
origin: http://example.org
sec-fetch-mode: cors
sec-fetch-site: cross-site

当请求跨域到https://api.blah-blah-blah时，浏览器会触发CORS校验规则，要求目标服务器返回的响应头中包含Access-Control-Allow-Origin，且值需匹配http://example.org（或使用通配符*）。如果服务器未配置该规则，就会抛出你遇到的CORS错误。

背景脚本的CORS特性 #

背景脚本运行在Chrome扩展的独立沙箱环境中，它的请求使用的是扩展自身的Origin（即chrome-extension://[扩展ID]）：

Referrer Policy: strict-origin-when-cross-origin
origin: chrome-extension://faebbackmmlgdbgjmljofnijfdfaepbo
sec-fetch-mode: cors
sec-fetch-site: none

Chrome扩展对背景脚本的跨域请求有特殊权限支持：只要你在扩展的manifest.json中配置了对应的host_permissions，背景脚本发起跨域请求时不需要目标服务器额外配置CORS头，浏览器也不会触发严格的CORS校验，因此请求能正常获取响应。

核心差异总结 #

• 内容脚本：继承宿主页面的Origin，受宿主页面的CORS规则约束，跨域请求必须依赖服务器的CORS配置
• 背景脚本：使用扩展自身的Origin，依赖扩展权限配置，不受宿主页面的CORS限制，跨域请求更灵活

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