Estoy tratando de cargar algún recurso, en este ejemplo, una imagen, en un archivo HTML, que tiene su fuente en otro servidor, lo que requiere un inicio de sesión.
así que escribiendo
<img src="https://somewebsite.com/images/test.png">
sin ningún tipo de autorización proporcionada, me dará una respuesta 401.
Cuando solicito la imagen, por ejemplo, con Postman y configuro el encabezado de autorización en consecuencia, la imagen se carga.
Incrustar la información de inicio de sesión directamente en la imagen src como
<img src="https://username:password@somewebsite.com/images/test.png">
funciona perfectamente bien también. Aunque no quiero tener información sensible visible en el DOM. Básicamente, lo que quiero lograr es que el encabezado de autorización esté configurado para las solicitudes invocadas por los elementos img.

Ya intenté hacerlo con un trabajador de servicio como este.

 if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker .register('/service-worker.js') .then(registration => { console.log('ServiceWorker registration successful with scope: ', registration.scope); }) .catch(err => { console.log('ServiceWorker registration failed: ', err); }); }); }

con el service-worker.js que contiene

 self.addEventListener('fetch', event => { event.respondWith( fetch(event.request, { mode: 'cors', credentials: 'omit', headers: { "Authorization": "Basic " + btoa('cui-test:cui-testcui-test') } }) ) });

aunque esa solución solo funciona si la URL de la imagen está alojada en el mismo servidor, no en el origen cruzado.
Me pregunto si hay alguna forma de configurar un alcance de trabajadores de servicio en otro servidor.
O una forma completamente diferente de configurar el encabezado en todas las solicitudes.