app.assets.loadFromUrl() is blocked by CORS policy

[WingUNO]

Hi, I want to change the material.diffuseMap like this:

And the headImgUrl is http://wx.qlogo.cn/mmopen/Bdqkib3KzL1mfgiau4TPdnDiaNxOM0Lnmic5FL0JpiaVkbxkAjBTRbnLOWrMuDjYPhq5f1JEmRpfJiaEg2VvcmYG61d6ibG5LrUJ77w/0

Then, a error occured:

Is PlayCanvas according to postfix to determine the asset is correct or not ?
Then, I added “.png” to the end of the headImgUrl like this:

Then, the problem above was solved but another problem occured :

Then, I using this hack :

but it does’t work ! How can I fix this problem ?

Thank you in advance !

[max]

The website you are loading images from, shall add CORS headers to its response.

[WingUNO]

Hi, max. Thank you for your reply. That’s a good idea but the website I am loading images from is not under our control. We load images from WeChat server.

So, I did some tests. First, I used console to new an Image and set its src. Second, I appened to document.body and set its CSS properties :

This image can be loaded successfully. But I catched the error and found that PlayCanvas uses the same way to load images from specified url :

And I check the image.crossOrigin and it is anonymous :

So, I was confused. Could you explain it ?

And if possible, can I use something like JSONP or window.name to avoid CORS ?

Thank you !

[WingUNO]

Hello ?

(Post must be at least 20 characters)

[dave]

Can you send a link to the URL you are trying to load so that we can try it here?

In general though, if the image does not have CORS headers and you don’t control the server. Then you can’t load the image.

[WingUNO]

This is the URL.
http://wx.qlogo.cn/mmopen/Bdqkib3KzL1mfgiau4TPdnDiaNxOM0Lnmic5FL0JpiaVkbxkAjBTRbnLOWrMuDjYPhq5f1JEmRpfJiaEg2VvcmYG61d6ibG5LrUJ77w/0

[Ben]

Hi WingUNO, I’ve had a look into different ways to try and load the image, but as Max and Dave have both said I don’t believe there is a way without adding the CORS headers.