cssdjangocorscross-site

Background-image in CSS url blocked by Opaque Response Blocking

In Django I use a background-image stored on a remote web-storage (Digitalocean Spaces) like this:

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

but the request gets blocked A resource is blocked by OpaqueResponseBlocking.

The same image is loaded in another place on the same page through a img tag without problems.

To understand the problem: What is the difference on the server-side requests that the css-url gets blocked while the img-url passes?

CORS Panel

Solution

  • The specific problem here is that I used the <style> tag to set up the background-image. This - i guess - forced django to send the request with Content-Type: application/xml that gets blocked.

    Changing the code to:

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

    fixed the problem.