Cross Origin ajax "POST" request failing

Question

I have a webservice(REST) running on localhost:8080, to call the webservice I use this jquery code:

jQuery.ajax({
        type: "POST",
        url: "http://localhost:8080/user/register",
        data: '{"name": "' + name + '","email": "' + email + '","password": "' + password + '"}',
         beforeSend: function(x) {
              if(x && x.overrideMimeType) {
               x.overrideMimeType(jsonMimeType);
              }
             },
        dataType:"jsonp",
        Accept : "application/json",
        contentType: "application/json",
        success: registerUser_success_callback,
        error: registerUser_error_callback
    });

When I try to call this javascript from the same domain(i.e. localhost:8080), it work just like a charm!. Here is the screen shot of the same: enter image description here

But when I try to access the same from a different domain(i.e localhost:80), it fails, and surprisingly instead of a POST, it sends out a GET and I also get a log in my server's log file, saying that the GET method not supported for REST resource. Here is the screen of the same: enter image description here

From what I have read on internet(especially here, great article!), cross domain request should first send out an OPTIONS request(which is cached for later usage.) What is going wrong in my case?

I have tried calling the rest service with same parameters using FireFox's plugin RESTClient, I was able call the rest service(POST method) successfully, so this mostly is the issue with ajax part.

Help me resolve this cors hell! and do lemme know if I need to share any more details on this.

PS: After @A. Wolff Suggested, I changed the data tyoe from jsonp to json, now my browser sends out OPTIONS, but after that it doesn't send the actual POST request!!!

You cannot use POST method with jsonp due to nature of jsonp — A. Wolff, Nov 30 '14 at 14:15
Thanks @A.Wolff for quick response! can you explain that in a bit more detail? or an weblinks? — buch11, Nov 30 '14 at 14:19
You can see this question: http://stackoverflow.com/questions/4508198/how-to-use-type-post-in-jsonp-ajax-call Hope this help! — A. Wolff, Nov 30 '14 at 14:21
Thanks! just curious, why would it work if the request is coming from the same domain? @A.Wolff — buch11, Nov 30 '14 at 14:36
It shouldn't. Again, a POST method is unable to create a script tag client side which is the way jsonp works. But using CORS, you shouldn't have to use jsonp, try using json instead — A. Wolff, Nov 30 '14 at 14:41

score 0 · Accepted Answer · answered Dec 03 '14 at 05:03

Well, some more digging and I found the solution to this!

After the change A. Wolff suggested, browser was sending out an OPTIONS request and was receiving a 200 response, but after that actual POST request was not being sent to the server.

Problem was, if you send any specific headers, "Content-Type" in my case, server has to add that header in "Access-Control-Allow-Headers" field of the response(response of OPTIONS request). I changed my server side code to populate that field in the response header, and VOILA!

Hope this will be helpful to others, too!

Happy Coding.

Check out the W3C spec on [**Cross-Origin Resource Sharing**](http://www.w3.org/TR/cors/) as well. — Leo, Dec 03 '14 at 05:15

Cross Origin ajax "POST" request failing

1 Answers1