Фоновое изображение в CSS-урле блокируется блокировкой непрозрачных ответов

Я использую фоновое изображение, хранящееся на удаленном веб-хранилище, следующим образом:

<style>
    .bg-image {
        background-image: url("{{ instance.background.url }}");
    }
</style>

но запрос блокируется A resource is blocked by OpaqueResponseBlocking.

Отображение изображения "обычным" способом с помощью <img src="..."> работает отлично.

Я пробовал установить заголовок в CORS-Configuration, например: Content-Type: text/css, но это ничего не изменило.

Я указал домен происхождения и разрешил GET, PUT, DELETE, POST и HEAD.

Блокировка непрозрачного ответа - это новая возможность, которая ожидает включения в стандарт fetch, см. https://github.com/whatwg/fetch/pull/1755. Ее цель сформулирована следующим образом:

По сути, CSS, JavaScript, изображения и медиа (аудио и видео) можно запрашивать через происхождения без протокола CORS. И, к сожалению, за исключением CSS, не существует MIME-типа принуждение. Этот алгоритм направлен на блокировку как можно большего количества ответов, которые не относятся к одному из этих типов (или являются более новыми вариантами этих типов), чтобы избежать утечки их содержимого через побочные каналы.

Браузеры, реализующие эту функцию, будут блокировать изображения, которые подаются с типом mime XML (например, Content-Type: application/xml), но Content-Type: image/svg+xml разрешены.

Конкретная проблема заключается в том, что я использовал тег <style> для установки background-image. Это - я полагаю - заставило django отправить запрос с Content-Type: application/xml, который был заблокирован.

Измените код на:

<div style="background-image: url('{{ instance.background.url }}');">
    ...
</div>

устранил проблему.

Вернуться на верх