CORS request blocked after enabling CORS in JQuery

Question

Edit It the standard Firefox Developer tools the request is sent. However the response is empty not status code nothing. In Chrome I also get net::ERR_EMPTY_RESPONSE

I am trying to sent a cross-domain AJAX request using Javascript. Before sending the request I JQuery I have enabled CORS like this:

$.ajaxSetup({
            crossDomain:true,
        });

I tried to send a test request using Fiddler and in the response headers I have:

 Access-Control-Allow-Origin: *
 Access-Control-Allow-Methods: *

However I still can't get the following request working in Firefox and Chrome

   var data = {
      uid: uid,
      pwd: password,
      deviceid: deviceid,
      push: push
  };

  var settings = {
    type:"POST",
    data: data,
    success: onLoginSuccess,
    error: onLoginFailed
  };
  $.ajax(globals.getServiceURL() + "/login", settings);

In Firebug console I get:

Cross-Origin Request Blocked: The Same Origin Policy disallows
reading    the  remote resource at (request URL goes here). 
This can be fixed by moving the resource to the same domain or enabling CORS.

How do I properly enable CORS?

Answer 1

Note that Access-Control-Allow-Methods doesn't support "*" value. ( http://www.w3.org/TR/cors/#syntax )

Also, the "*" cannot be used for Access-Control-Allow-Origin that supports credentials. ( http://www.w3.org/TR/cors/#resource-requests )

Please follow the link to learn more about how to make CORS requests from JQuery. http://www.html5rocks.com/en/tutorials/cors/#toc-cors-from-jquery