I have an Angular 9 app that displays images from S3 with Cloudflare caching = standard… The app works great until I try to cache these images using Angular’s Service Worker. The Service Worker is triggering CORS errors “I think” because no Origin is sent in the request header. The Service Worker has no configuration options that I can find. Is it possible to configure Cloudflare to serve these images and ignore CORS in this case?
I can rename an S3 image and NOT get a CORS error for the new image. So I thought this was a Cloudflare caching CORS headers problem as described here: https://support.cloudflare.com/hc/en-us/articles/200308847-Using-cross-origin-resource-sharing-CORS-with-Cloudflare. However, ~1 hour later the new renamed images were also showing CORS errors. I can’t make any sense of this behavior. I can also add a random query string to an image and NOT get a CORS error but I suspect they would start to error over time too. Updating the last modified date on the file and doing a Cloudflare full purge made no difference.
Setting Cloudflare caching = development mode made no difference.
I have a detailed write-up on stackoverflow here: