CORS issue in FireFox about dom-to-image HOT 12 CLOSED

It will not work this way because the image is served from a different domain than the script. The script performs XMLHttpRequest to get the image data, and request will rather not succeed.

See request headers (pay attention to the Origin field):

GET /eQxoG0h.jpg HTTP/1.1
Host: i.imgur.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:45.0) Gecko/20100101 Firefox/45.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://run.plnkr.co/wrtWddsqSpO1Cd9b/
Origin: http://run.plnkr.co
Connection: keep-alive

Here is the error you get on console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://imgur.com/eQxoG0h. (Reason: CORS header 'Access-Control-Allow-Origin' missing).  

So, you will not get this image rendered, as the script simply does not have access to it. I believe you're having the same problem as in issue #22

from dom-to-image.

I struggled with this for a while, I was the person who opened issue #22. The problem is that the XMLHttpRequest is very strict on the kinds of headers it wants back. The person who runs the server with the resource being denied may not be so strict (I mean you Amazon S3). The way I dealt with it was to change the original URL on the page to a 'mirror' URL that worked through a GET API on my server, where I can control the headers, and just run all the resources through that. Hope that helps.

from dom-to-image.

What I expect is

when one of images has CORS issue, it's better to render without that image instead of stopping the whole operation without giving the detailed error message.

Yes "I will not get this image rendered", but how about others?

My web page may have hundreds of images with one external image link, then I still want to have the whole screen shot without the image.

from dom-to-image.

OK, I've missed the fact that you're actually getting an error instead of of the rendering result. Another interesting thing is - this example works on Chrome, event without any CORS issues. Will take a look at that.

from dom-to-image.

Hello, I am having an issue with firefox 46.0.1. I am having image converted like this

Also know that,some images are flipped horizontally.
Can you please help? Thanks

from dom-to-image.

@RedsaiyanAlpha please provide a jsfiddle or something like that

from dom-to-image.

Please check https://jsfiddle.net/w9hs8yzr/2/

from dom-to-image.

Any Update?

from dom-to-image.

Sorry, currently I'm travelling, but will definitely take a look next week.
On May 16, 2016 8:15 AM, "RedsaiyanAlpha" [email protected] wrote:

Any Update?

—
You are receiving this because you were assigned.
Reply to this email directly or view it on GitHub
#29 (comment)

from dom-to-image.

Thanks. Enjoy!

from dom-to-image.

@RedsaiyanAlpha sorry for delay. Your jsfiddle gives me an error

ReferenceError: domtoimage is not defined
conversion() _display:88
1 _display:88:16

you might want to take a look at this example fiddle http://jsfiddle.net/tsayen/8h13tmcj/2/ on how to load and use the lib

from dom-to-image.

Hello, find same error when load image from different origin.

from dom-to-image.