Loading image from URL blocked by CORS

[birdkingz]

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]

I think this is a duplicate of #99

[englercj]

Actually, this should already be working for images. Can you give me a running example of this not working?

[birdkingz]

I'm using the resource-loader which provided by Pixi.js Maybe they are still using older version of resource-loader?

[englercj]

While they are generally a couple version behind, this has worked for a while IIRC. Do you have a running example of this failing? Using codepen or jsfiddle would be most helpful.

[birdkingz]

I've created a sample project in ReactJS. https://drive.google.com/open?id=13FOP0Y9lXMDHN3bsshm8arezJsNg3n9N

After unzip please run command npm install in terminal to install all the required packages. The main script file is call App.js

[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".

[MGasztold]

Hello,

I struggle with similar issue and I can check with postman that cross origin header is present in the server's response.

I can also fetch the image successfully by puting static < img src= ... > entry in the html of my page.

Only the response for the request that pixi loader performs actually does not contain cross origin header.

Can somebody give any hint on how to overcome this issue?

[englercj]

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