I'm working on a web app where user uploaded images are hosted on a cdn. These images are displayed within an svg since I'm using d3 to display those images in a bubble style interface. The <image> tag within the svg has crossorigin set to "anonymous" but those images get blocked by Firefox since the request to fetch them are made with Sec-Fetch-mode header set to 'no-cors'. Setting crossorigin to "anonymous" on an <img /> tag works fine but with an <image> tag, it doesn't work.
This is the error message from Firefox when it blocks the images:
The resource at “https://cdn.server.com/imagepath.jpg” was blocked due to its Cross-Origin-Resource-Policy header (or lack thereof). See https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)#
How do I make my images load properly/reliably on Firefox?
I'm on Firefox version 110. The images both in <img /> tag and in the svg work fine with Chrome which seems to set the appropriate header.
Another peculiar thing is that the images load fine when running the app on localhost though the browser makes the same request with the same headers both times. This is a react app setup with Vitejs and vite-pwa if that helps.
Figured out the solution. The issue was actually that the back-end server for my site was serving the site without setting the COEP and CORP headers. Setting them to the appropriate values worked.