Jak JQUERY i JQM powodują błąd CORS?
Mam stronę HTML5 bez Jquery, która nie ma żadnego błędu CORS, jak poniżej
<!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>
Ten kod jest w stanie zwrócić dane obrazu base64 i działa dobrze.
Po dodaniu Jquery i JQM zwraca błąd CORS, kod jak poniżej
<!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>
Po włączeniu Jquery i JQM nie jestem w stanie uzyskać danych obrazu base64, z powodu błędu CORS dla jquery, komunikat o błędzie jest poniżej
Cross-origin image load denied by Cross-Origin Resource Sharing policy. jquery-1.9.0.min.js:3
Nie mam pojęcia, dlaczego kiedyś wystąpił błąd CORS. Po mojej stronie serwera umieściłem nagłówek, aby zezwolić na pochodzenieHeader add Access-Control-Allow-Origin "*"