When using ShortPixel Adaptive Images, you might end up in certain cases with a CORS warning that looks like this:
Warning: access to image
and-the-image-url-goes-herehas been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
This can happen when ShortPixel processes resources – images, CSS, JS or fonts – for the first time (check
this article to learn more about how ShortPixel AI works). Every time a resource is visited for the first time, we’ll return a temporary 307 redirect for them (until they are processed by our systems) and this can throw a CORS warning like the one described above.
There are 2 solutions to this, one which is more permissive (and might fix other CORS issues present on your site) and another more restrictive one, which will address this specific issue.
The more permissive solution is to add an
Access-Control-Allow-Origin header on your site in the following way. This will basically allow requests made from any origin:
Access-Control-Allow-Origin: *
The more restrictive solution is to add the same
Access-Control-Allow-Origin header, but with your site domain, for example:
Access-Control-Allow-Origin: https://yourdomain.com