我一直在使用 Angular 5 开发 Chrome 扩展。
我能够成功从选项卡 API 读取 favIconUrls，并将它们绑定(bind)到我的 popup.html 的 DOM。这些图标的下载和显示没有问题。下面是一个示例请求。
Request URL:https://www.gitbook.com/assets/images/logo/favicon.ico?
version=19.7.51
Request Method:GET
Status Code:200
Remote Address:104.25.213.20:443
Referrer Policy:no-referrer-when-downgrade
Response Headers
cache-control:public, max-age=14400
cf-cache-status:HIT
cf-ray:xxxxx
content-encoding:gzip
content-type:image/x-icon
date:Mon, 08 Jan 2018 16:43:03 GMT
etag:xxxx
expires:Mon, 08 Jan 2018 20:43:03 GMT
last-modified:Fri, 22 Dec 2017 22:51:08 GMT
server:cloudflare
status:200
vary:Accept-Encoding
via:1.1 vegur
Request Headers
:authority:www.gitbook.com
:method:GET
:path:/assets/images/logo/favicon.ico?version=19.7.51
:scheme:https
accept:image/webp,image/apng,image/*,*/*;q=0.8
accept-encoding:gzip, deflate, br
accept-language:en-xx;q=0.9,en;q=0.8
cache-control:no-cache
cookie:xxx
pragma:no-cache
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
此请求是由 Angular 的平台浏览器模块发出的。
我想对每个 favicon 图像进行 Base64 编码，因此一直使用 fileReader API 来读取 favIconUrl 并将其转换为 Base64 编码的 dataUrl。这适用于某些资源，但不适用于其他资源(取决于 CORS)。
失败请求的示例如下所示。
Request URL:https://www.gitbook.com/assets/images/logo/favicon.ico?version=19.7.51
Referrer Policy:no-referrer-when-downgrade
Request Headers
Provisional headers are shown
Origin:chrome-extension://abcdefghijklmnopqrstuvwxyz
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
Query String Parameters
view source
view URL encoded
version:19.7.51
据我了解，此请求被阻止，因为 CORS 阻止源(我的 chrome 扩展)检索资源。我很难理解的是，同一个扩展如何通过 Angulars 平台浏览器模块成功加载其 DOM 内的资源？这肯定也违反了 CORS 吗？该请求未显示平台浏览器正在设置来源。
任何有助于理解正在发生的事情的帮助将非常感激。
最佳答案
我怀疑这可能是因为 Chrome 实际上实现了 CORS - 它添加了 Origin 请求 header 并检查Access-Control-* 响应 header 。
那么，当 Chrome 扩展程序执行默认操作时，Chrome 可能有效绕过了自己的 CORS 处理？
另请注意，直接检索图像(即使是从不同的域)不会调用 CORS - 只有在使用 fetch 时才会真正调用 CORS(XMLHttpRequest 基本上是一个要获取的“包装器”)。因此，如果 fileReader API 实现了 fetch(无论是通过 XMLHttpRequest 还是直接)，那么 Chrome 将调用其 CORS 处理。
关于javascript - 在 Angular Chrome 扩展的 DOM 中加载选项卡图标成功，但显式 XHR 请求失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48154823/