standard XMLHttpRequest works, but not jQuery $.ajax when POSTing to REST service

Question

I want to make a POST to a REST service. When using the standard XMLHttpRequest-way it works, but when using jQuery $.ajax the HTTPRequest headers gets messed up, and the POST becomes OPTIONS.

I'm new to jQuery and HTTP, so I might have missed something obvious :)

This works:

function sendPostXMLHTTP() {
    var jData = { "Name": "Olle" };

    var client = new XMLHttpRequest();
    client.open("POST", "http://localhost:8383/DEMOService/TestPost");
    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    client.send(JSON.stringify(jData));
}

This does not work:

function sendPostAjax() {
    var jData = { "Name": "Olle" };

    $.ajax({
        type: 'POST',
        url: 'http://localhost:8383/DEMOService/TestPost',
        contentType: "text/plain;charset=UTF-8",
        data: JSON.stringify(jData)
    });
}

HTTPRequest generated from from sendPostXMLHTTP() (correct):

POST http://localhost:8383/DEMOService/TestPost HTTP/1.1
Host: localhost:8383
Connection: keep-alive
Content-Length: 15
Origin: http://localhost:9990
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11
Content-Type: text/plain;charset=UTF-8
Accept: */*
Referer: http://localhost:9990/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

{"Name":"Olle"}

HTTPRequest generated from from sendPostAjax() incorrect:

OPTIONS http://localhost:8383/DEMOService/TestPost HTTP/1.1
Host: localhost:8383
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://localhost:9990
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11
Access-Control-Request-Headers: Origin, X-Requested-With, Content-Type, Accept
Accept: */*
Referer: http://localhost:9990/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

Why does the "jQuery $.ajax"-way turn the POST into a OPTIONS, and why does the request body disappear?

Are you running the two sets of code on the same page (and thus origin)? The OPTIONS request suggests that you're launching a preflight check for CORS. — Quentin, Mar 14 '12 at 10:11
What version of jQuery are you using? I remember I had to turn off some non-standard headers that triggered preflight as @Quentin suggested. Not sure if they fixed that and you need to let the communication finish. I have an open question >[here](http://stackoverflow.com/questions/3290068/please-help-test-a-cors-issue-in-firefox-jquery-ajax-when-401)< which smells the same — mplungjan, Mar 14 '12 at 10:15

score 0 · Answer 1 · answered Mar 14 '12 at 10:15

jQuery assumes that you're doing a Cross-Origin Resource Sharing request. By W3C standard any CORS request must be preceded by empty OPTIONS request asking server to allow the subsequent request with payload.

Are you doing a request to the server other that your script is hosted on?

If yes, then jQuery's request is correct and XMLHttpRequest's is not - you should implement OPTIONS preflight request yourself.

If no then you should consider changing something in your configuration - for example, moving a script to the same website where your REST service resides.

OR, as suggested in comments, this might be a bug in jQuery or browser you're using.

Are you doing a request to the server other that your script is hosted on? - **YES**, I am. I guess I have to add on the webserver that hosts the javascript, and then, like you say, send the OPTIONS preflight according to W3C standard. Thanks for your help :) — uggeh, Mar 15 '12 at 14:12

score 0 · Answer 2 · answered Mar 14 '12 at 11:03

Try it:

var jData = {name:'Olle'};
  $.ajax({
  url : 'http://localhost:8383/DEMOService/TestPost',
  type : 'POST',
  data : jData
});

Data will always be transmitted to the server using UTF-8 charset; you must decode this appropriately on the server side. See also API

standard XMLHttpRequest works, but not jQuery $.ajax when POSTing to REST service

2 Answers2