Pixi.js: An error about CORS of Image.

[finscn]

When I update the last version PIXI in github dev branch, my demo can't run.
There is an error message about load image:

Access to Image at 'file:///Users/rocky/DEV/www/test-pixi/client/test-mesh/required/assets/displacement_BG.jpg' from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

I use chrome and with the args : --args --allow-file-access-from-files -enable-webgl --ignore-gpu-blacklist.

There is no problem in the version at commit 07eb79c4e4edb1cc4f52b7105e54ddd77868acdf

[englercj]

If I had to guess, I would say it was related to this change: https://github.com/pixijs/pixi.js/commit/73c07158678f35ea181c9e5218bb32dfe51fc89f

Have you tried passing "true" for the crossorigin param?

[finscn]

@englercj , yes , I passed true , in fact , the crossOrigin of img is 'anonymity' already.

[finscn]

Oh! It's chrome's bug. The last dev version has fixed it .

[bebensiganteng]

Hi @finscn would you mind sharing the solution, please? I'm having the same issue.

Specification:

• Pixi 4.5.3
• Chrome 59.0.3071.115
• Running it from localhost

Code:
let sprite = new PIXI.Sprite.fromImage('http://adgang.jp/wp-content/uploads/2017/07/318.png', true);

[finscn]

@bebensiganteng use the last chrome , and start it with --args --allow-file-access-from-files

[bebensiganteng]

@finscn thank you for the prompt reply. I've tried on the latest chrome, but still, it throws the same error.

$ open /Applications/Google\ Chrome.app --args --allow-file-access-from-files

Error;
Access to Image at 'http://adgang.jp/wp-content/uploads/2017/07/318.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

[finscn]

the http://adgang.jp doesn't allow you cross origin.
you could use --disable-web-security args of chrome. but it's deprecated

[bebensiganteng]

Well, this kind of work but only for Canvas.

https://jsfiddle.net/vkww63ao/

[englercj]

The correct way of fixing your issue wowuld be to have the server which is serving that image send the proper CORS headers to inform the browser it is allowed to use it cross origin. Then set the crossOrigin property on your image when loading it.

[bebensiganteng]

Thank you, but unfortunately, I'm building something that requires me to use copious amount of "hotlinking".

[bebensiganteng]

@englercj another question, I'm using PIXI.loader to load the images, but it throws the cors error and setting crossOrigin to either false/true doesn't affect anything, am I missing something?

https://jsfiddle.net/vkww63ao/1/

[englercj]

As you can see in the error message the browser is blocking the image load because it is missing cross origin headers. The loader determined that the image was crossOrigin and set the value for you. You can either 1) Update the server to send the correct CORS headers so that you can do a crossOrigin load or 2) Change your crossOrigin param to empty string, which will "work" but will dirty the canvas and restrict you from performing certain potentially insecure actions (like reading pixels). Example of options 2: https://jsfiddle.net/vkww63ao/2/

[bebensiganteng]

Thank you!

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.