title: Jquery Ajax to Web Api CORS is not working
body: <p>I have the following jquery code</p>
  
  <pre><code> $('#spam').click(function () {
      $.ajax({
          type: 'GET',
          url: 'http://www.my-contacts.com/contacts/api/contacts',
          dataType: 'json',
          contentType: 'application/json; charset=utf-8',
          headers: { 'Authorization=': 'Bearer ' },
  
      }).done(function () {
          alert("success");
      })
  .fail(function (xhr, textStatus, errorThrown) {
      console.log(xhr);
      alert("Error:" + xhr);
  });
  });
  </code></pre>
  
  <p>The browser send the preflight request with options and get a 200 from the server (I have arranged with a handler that is called). Below are the headers</p>
  
  <pre><code>**Response Headers view source**
  Access-Control-Allow-Head...    Authorization, X-Authorization
  Access-Control-Allow-Meth...    GET, POST, PUT, DELETE, HEAD, OPTIONS
  Access-Control-Allow-Orig...    *
  Cache-Control   no-cache
  Content-Length  0
  Date    Fri, 13 Dec 2013 12:01:18 GMT
  Expires -1
  Pragma  no-cache
  Server  Microsoft-IIS/7.5
  X-AspNet-Version    4.0.30319
  X-Powered-By    ASP.NET
  
  **Request Headers view source**
    Accept    text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Encoding   gzip, deflate
    Accept-Language   en-US,en;q=0.5
    Access-Control-Request-He...  content-type
    Access-Control-Request-Me...  GET
    Connection    keep-alive
    Host  www.my-contacts.com
    Origin    http://www.my-promo.com
    User-Agent    Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0
  </code></pre>
  
  <p>The problem is that the browser is supposed to continue with the GET request but nothing happens and I receive and error from the .error() Jquery Code.</p>
  
  <p>Any pointers?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>It turns out that there were many reasons why the above did not work. However it finally came down to JQuery not working well with CORS (at least the version that I am using 1.8.2 but I tried 1.10 too)</p>
  
  <p>I changed the code with </p>
  
  <pre><code>(function () {
              x = new XMLHttpRequest();
              x.open('GET', 'http://www.my-contacts.com/contacts/api/contacts', false);
              x.onreadystatechange = function () {
                  if (x.readyState === 4) {
                      console.info(x.responseText);
                  }
              };
              x.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
              x.setRequestHeader('Authorization', 'Bearer ' + accessToken);
              x.send('');
          })();
  </code></pre>
  
  <p>But this code does not work with IE or FF. Chrome on the other hand works perfectly. The other two give me an error with <code>x.send('')</code></p>