title: How JQUERY and JQM causing CORS error?
body: <p>I have a HTML5 page without any Jquery that does not have any CORS error as below</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;HTML&gt;
  &lt;button type="button" onClick="getBase64FromImageUrl()"&gt;Click Me!&lt;/button&gt;
  &lt;img id="preview1" crossorigin="anonymous" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&amp;d=identicon&amp;r=PG"&gt;
  &lt;script type="text/javascript"&gt; 
                  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,/, "")); 
                  }
      &lt;/script&gt;
      &lt;/HTML&gt;
  </code></pre>
  
  <p>This code is able to return base64 image data and Working fine.</p>
  
  <p>Once I add Jquery and JQM on it , it return CORS Error , The code as below </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;HTML&gt;
  &lt;script type="text/javascript" src="js/jquery-1.9.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"&gt;/script&gt;         
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/custom.css" /&gt;
  
  &lt;button type="button" onClick="getBase64FromImageUrl()"&gt;Click Me!&lt;/button&gt;
  &lt;ul data-role="listview" data-filter="true" data-filter-placeholder="Search ..." id="Pro"&gt;
                  &lt;li id="1"&gt;                 
                      &lt;a&gt; 
                      &lt;img id="preview1" crossorigin="anonymous" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&amp;d=identicon&amp;r=PG"&gt;
                      &lt;h2&gt;Warning&lt;/h2&gt;
                      &lt;p&gt;Hot&lt;/p&gt;
                      &lt;/a&gt;    
                  &lt;/li&gt;
              &lt;/ul&gt;
  
  &lt;script type="text/javascript"&gt; 
              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,/, "")); 
              }
  &lt;/script&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>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</p>
  
  <pre><code>Cross-origin image load denied by Cross-Origin Resource Sharing policy. jquery-1.9.0.min.js:3
  </code></pre>
  
  <p>I have no idea why once include the CORS error happen . In my Server side i have included the header for allowing origin <code>Header add Access-Control-Allow-Origin "*"</code></p>