跨域HTML img src请求如何携带Authorization授权头

Service Worker 不存在「配置作用域到外域」的可能性，这是浏览器强制的同源安全规则：Service Worker 只能拦截注册路径同源下页面发起的请求，永远无法将作用域扩展到第三方域名。
你之前的代码仅对同域图片生效，跨域场景失败的根本原因是：

• <img> 标签默认发起 no-cors 模式的跨域请求，这类请求禁止修改请求头，也禁止前端读取响应内容
• 你在 Service Worker 中强行将请求改为 cors 模式并追加 Authorization 头的前提，是目标资源服务器必须返回合法的 CORS 响应头，否则浏览器会直接拦截请求，响应不会正常返回。

根据你是否能控制目标鉴权服务器的配置，二选一即可：

方案1：目标服务器可配置CORS（性能最优） #

如果目标图片服务器支持修改配置，按以下三步调整即可让 Service Worker 逻辑正常工作：

1. 给目标图片服务器配置CORS响应头，参考规则：

   Access-Control-Allow-Origin: https://你的页面部署域名
   Access-Control-Allow-Headers: Authorization
   

   如果需要携带Cookie鉴权，再追加：

   Access-Control-Allow-Credentials: true
   

2. 给所有需要加载鉴权图片的<img>标签添加crossorigin属性，通知浏览器发起CORS模式的请求：

   <img src="https://somewebsite.com/images/test.png" crossorigin="anonymous">
   

3. 修正Service Worker的拦截逻辑，仅拦截目标域名的请求，不要全局拦截所有请求避免影响其他资源加载，同时不要覆盖原请求的必要头：

   self.addEventListener('fetch', event => {
     // 只拦截指向目标鉴权服务器的请求
     if (event.request.url.startsWith('https://somewebsite.com/')) {
       const modifiedRequest = new Request(event.request, {
         mode: 'cors',
         credentials: 'omit', // 若使用Cookie鉴权改为include
         headers: new Headers({
           ...Object.fromEntries(event.request.headers),
           'Authorization': 'Basic ' + btoa('cui-test:cui-testcui-test')
         })
       })
       event.respondWith(fetch(modifiedRequest))
     }
     // 其余请求直接放行不做处理
   })
   

方案2：目标服务器不可修改配置（通用兜底） #

如果目标服务器不支持配置CORS，浏览器端没有任何原生方案可以直接给跨域img请求加自定义请求头——所有前端API（包括Service Worker、XHR、fetch）都受限于浏览器的跨域安全规则，无法绕过。
这种场景只能通过同域代理中转实现：

1. 在你自己的页面同源服务端新增一个图片代理接口，例如/api/image-proxy
2. 页面中img标签的src指向自有代理接口，将目标图片地址作为参数传递：

   <img src="/api/image-proxy?target=https://somewebsite.com/images/test.png">
   

3. 代理接口收到请求后，由服务端向目标鉴权服务器发起请求，在服务端请求中添加Authorization头，拿到图片二进制内容后直接返回给前端。
   该方案完全不需要目标服务器做任何适配，鉴权信息只存储在服务端，不会暴露到前端代码、DOM或请求日志中，兼容性覆盖所有浏览器。

• 不要尝试将Service Worker注册到第三方域名下：浏览器禁止加载非同源路径下的Service Worker脚本，该限制写在W3C标准中，没有绕过方式。
• 不要使用https://username:password@domain的格式传递鉴权信息：现代浏览器默认会拦截URL中的凭据字段，要么直接忽略，要么弹出原生鉴权弹窗，无法自动完成加载，且凭据会直接暴露在DOM和浏览器请求日志中，无安全性可言。
• 不要在前端硬编码Basic鉴权的账号密码：哪怕不写在img的src中，只要鉴权信息存在于JS代码里，用户打开控制台就能直接获取，生产环境不建议使用这种鉴权方式。

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