Como JQUERY e JQM estão causando o erro CORS?

Question

Nov 18, 2013, 01:19 PM

jquery-mobile google-chrome html5 cors jquery

Como JQUERY e JQM estão causando o erro CORS?

Eu tenho uma página HTML5 sem qualquer Jquery que não tenha nenhum erro de CORS como abaixo

<!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>

Este código é capaz de retornar dados de imagem base64 e funcionando bem.

Depois que eu adicionar Jquery e JQM nele, ele retornará CORS Error, O código como abaixo

<!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>

Depois de incluído JQuery e JQM não sou capaz de obter dados de imagem de base64, por causa do erro de CORS para jquery, a mensagem de erro está abaixo

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

Eu não tenho idéia porque uma vez incluir o erro CORS acontecer. No meu lado do servidor eu incluí o cabeçalho para permitir origemHeader add Access-Control-Allow-Origin "*"