JQUERY 和 JQM 如何导致 CORS 错误？
Posted
技术标签:
【中文标题】JQUERY 和 JQM 如何导致 CORS 错误？【英文标题】：How JQUERY and JQM causing CORS error? 【发布时间】：2013-12-01 14:16:12 【问题描述】：我有一个没有任何 Jquery 且没有任何 CORS 错误的 html5 页面，如下所示
<!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>
此代码能够返回 base64 图像数据并且工作正常。
一旦我在上面添加了 Jquery 和 JQM，它就会返回 CORS 错误，代码如下
<!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>
包含 Jquery 和 JQM 后我无法获取 base64 图像数据，因为 jquery 的 CORS 错误，错误消息如下
Cross-origin image load denied by Cross-Origin Resource Sharing policy. jquery-1.9.0.min.js:3
我不知道为什么一旦包含 CORS 错误就会发生。在我的服务器端，我包含了允许来源 Header add Access-Control-Allow-Origin "*"
【问题讨论】：
【参考方案1】：CORS 错误是由于您尝试加载到 Canvas 对象的图像来自另一个域，并且一旦您这样做了，您的 canvas 对象就会被污染。
解决方案：服务器发送图片应包含跨域标头，允许您的域访问信息。
模式信息：https://developer.mozilla.org/en-US/docs/HTML/CORS_Enabled_Image
【讨论】：
我知道这个问题。但我允许跨源标题。请看清楚问题 你是对的 - 图像响应中有一个标题。问题是当包含 jquery 时，origin 标头未发送。如果您将<script> 标签移动到页面底部，则一切正常。我承认，这不是完美的解决方案，但对于初学者来说应该这样做，特别是因为将 js 放在底部（即 HTMLBoilerplate）变得越来越普遍。
如果我将 jquery 移动到底部，还有另一个问题是每当我的其他 java 脚本有 $ 都会遇到问题。如果有任何脚本添加图像属性 Img.setAttribute('crossorigin','anonymous') 会发生同样的问题以上是关于JQUERY 和 JQM 如何导致 CORS 错误？的主要内容，如果未能解决你的问题，请参考以下文章
Jquery Mobile 滑块不工作 JQM 1.3.2 和 Jquery 1.10.2