Loading image from URL blocked by CORS

Hi,

I’m using the loader to fetch image from server but I’m getting an error from the browser which saying accessing image has been blocked by CORS policy.

Even though I have specify crossOrigin to true but it doesn’t seems to do anything. loader.add('image', 'https://pay.google.com/about/static/images/logos/apple_store.png', {crossOrigin: true})

Any idea how can I fix this problem?

[englercj]

So the problem is that you are loading a cross-origin image, with a cross-origin policy set; but the server you are loading from is not setting cross origin headers. Browsers don’t allow this. It either has to be loaded with no crossOrigin policy, or the server has to allow cross-origin usage.

You can load the image as “dirty” meaning you don’t set the crossOrigin policy. This will dirty any canvas you try to draw it to, which usually only means you can’t read any pixels from it. If that is OK for your application, you can override the behavior to not set a policy like this:

.add('https://some-cross-origin.com/image.png', { crossOrigin: '' })

The way the crossOrigin configuration works for a resource is:

• If it is true, then we will use 'anonymous' which is the default
• If it is any other non-string type (false, undefined, null, etc), then the lib will auto-detect if the url is cross-origin and set the policy correctly.
• If it is a string value, then the lib will use the string value as the policy. An empty string is “no policy”.

[englercj]

Please open a new issue with a repro case. Thanks!