CORS Blocking Some Files and not Others

Question

I am accessing image files on one server from code in my website on another server, so CORS is required. The images are placed on a canvas, and I use canvas.toDataURL() to obtain the resulting URL, so the access must no be tainted. I have tried both 'Header set Access-Control-Allow-Origin "*"' and 'Header set Access-Control-Allow-Origin "https://my-website.com"' (at different times) in the .htaccess file in /public_html on the image server.

Problem: Some of the image files are accessed just fine, but others get the following error: 'from origin 'example1.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'example2.com' that is not equal to the supplied origin.'

What reason could there be that some files are accessed fine and other files in the same directory are blocked?

Answer 1

Problem solved!  The problem lies with WIX.  However, the solution is surprising.

Background: My main site is implemented with WIX. From that site I am trying to upload images from a secondary site which is just a library for the images. I am using simply:  var sourceImage = new Image();   sourceImage.src = url;  in a script within an iFrame on a WIX page.  Note, however, that I need the uploaded image to not be tainted by CORS because I want to pass the image through  toDataURL() to get a temporary URL.

It turns out that in WIX upload does not allow some file names.  For example, WIX does not like '-Email' in the filename - remove it leaving the filename otherwise the same and the upload works fine.  Also WIX does not like 'screenshot' in the filename. There could be other exclusions as well, so if you are a WIX developer be forewarned.