javascript - The canvas image comes from api.xx.com. The current domain is m.xx.com. If canvas.toDataURL() is called, a cross-domain report will be reported.

A project uses the Canvas canvas tag of Html5. The image displayed by canvas comes from the subdomain name api.xx.com. The domain of the current page is m.xx.com. Once called through JS: canvas.toDataURL() , a cross-domain problem will be reported:

Redirect at origin 'http://api.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://m.xx.com' is therefore not allowed access.

I would like to ask if Youpaiyun has any relevant solutions, or can you add the Access-Control-Allow-Origin header for cross-domain image requests?

How to add Access-Control-Allow-Origin to the header of the requested image

Reply content:

A project uses the Canvas canvas tag of Html5. The image displayed by canvas comes from the subdomain name api.xx.com. The domain of the current page is m.xx.com. Once called through JS: canvas.toDataURL() , a cross-domain problem will be reported:

Redirect at origin 'http://api.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://m.xx.com' is therefore not allowed access.

I would like to ask if Youpaiyun has any relevant solutions, or can you add the Access-Control-Allow-Origin header for cross-domain image requests?

How to add Access-Control-Allow-Origin to the header of the requested image

I have encountered this problem before, and it was also a cross-domain problem with different subdomain names, because the images used were not on the same server.
The solution adopted at that time was to obtain the image file content through the server and then output it on the html page. In this way, the cross-domain problem of images could be solved. (But maybe the article is wrong!)

Plusimg.crossOrigin = "Anonymous"
Access-Control-Allow-OriginThis stuff is sent from the background
I have encountered this kind of problem before, but I didn’t deal with it this way. For some other reasons, I had to give up and download it from the server. Get the picture and change it to local