How JQUERY and JQM causing CORS error?

问题

I have a HTML5 page without any Jquery that does not have any CORS error as below

<!DOCTYPE html>
<HTML>
<button type="button" onClick="getBase64FromImageUrl()">Click Me!</button>
<img id="preview1" crossorigin="anonymous" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
<script type="text/javascript"> 
                function getBase64FromImageUrl() {
                    var img = new Image();
                    img =  document.getElementById("preview1");
                    var canvas = document.createElement("canvas");
                    canvas.width =img.width;
                    canvas.height =img.width;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0);
                    var dataURL = canvas.toDataURL("image/png");
                    alert(  dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); 
                }
    </script>
    </HTML>

This code is able to return base64 image data and Working fine.

Once I add Jquery and JQM on it , it return CORS Error , The code as below

<!DOCTYPE html>
<HTML>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js">/script>         
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />

<button type="button" onClick="getBase64FromImageUrl()">Click Me!</button>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search ..." id="Pro">
                <li id="1">                 
                    <a> 
                    <img id="preview1" crossorigin="anonymous" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
                    <h2>Warning</h2>
                    <p>Hot</p>
                    </a>    
                </li>
            </ul>

<script type="text/javascript"> 
            function getBase64FromImageUrl() {
                var img = new Image();
                img =  document.getElementById("preview1");
                var canvas = document.createElement("canvas");
                canvas.width =img.width;
                canvas.height =img.width;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
                var dataURL = canvas.toDataURL("image/png");
                alert(  dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); 
            }
</script>
</HTML>

After included Jquery and JQM i am not able to get base64 image data , because of CORS error for jquery, the error message is below

Cross-origin image load denied by Cross-Origin Resource Sharing policy. jquery-1.9.0.min.js:3

I have no idea why once include the CORS error happen . In my Server side i have included the header for allowing origin Header add Access-Control-Allow-Origin "*"

回答1:

CORS error is caused by the fact that image you're trying to load into Canvas object comes from another domain and once you've done so your canvas object is tainted.

Solution: server sending image should include cross-origin header allowing your domain to access information.

Mode info: https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image

来源：https://stackoverflow.com/questions/20047640/how-jquery-and-jqm-causing-cors-error

标签

jquery

html5

google-chrome

jquery-mobile

cors