JQuery and XHR -- Cross-site JSON POST with CORS

Question

I'm making a small UI to submit a JSON object to an external CastIron server (not that the server type is important to this question) using jQuery. The initial send works fine, but I'm not getting the response from the server. Here's what the jQuery looks like :

$.ajax({
        url: 'http://cirun2/Impact/CreateImpacts',
        type: "POST",
        data: JSON.stringify(myobj),
        dataType: 'text',
        async: false,
        //beforeSend: function(xhr){
        //      xhr.setRequestHeader(
        //},
        complete: function(returned_data) {
                $('#output').append("<p>Submitted successfully to CastIron. Returned data: " + returned_data + "</p>");
        },
        error: function(error_text) {
                console.log("Update unsuccessful. Status: ", error_text);
        }
});

I get the 'Submitted successfully to CastIron. Returned data: [object Object]' message, but it doesn't display the text, and firebug indicates that there's an error.

Firebug response

And here's the full error:

"[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://server.company.com/mr/js/jquery-1.11.0.min.js :: .send :: line 4" data: no]"

The part after the the 200 is the JSON object I'm expecting as a response. I'm not sure how to get to it. The part after the 'Via' is default CastIron headers showing how long each process took. I'm not sure if these are getting issued in the wrong order, or what the problem is.

EDIT (7MAY2014): I've done some more poking around, and I think I left out a crucial piece of information. I'm attempting to use CORS. Here's my headers. Is it possible that the headers are correct for the submit, but not correct for the returned value?

Response Headers
Access-Control-Allow-Head...    X-Requested-With
Access-Control-Allow-Orig...    *
Connection  keep-alive
Content-Length  288
Content-Type    application/json; charset=utf-8
Date    Wed, 07 May 2014 14:34:51 GMT
X-Powered-By    Express

Request Headers
Accept  application/json, text/javascript, */*; q=0.01
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Host    myserver.mycompany.com:4000
Origin  http://ironsides.zayo.com
User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:28.0) Gecko/20100101 Firefox/28.0

Unable to clearly view error message at posted image. If possible, can post error message text to original post ? Thanks — guest271314, May 02 '14 at 16:41
You need to use "jsonp" as datatype or try this link http://stackoverflow.com/questions/7157455/how-to-do-cross-domain-ajax-in-jquery-with-datatype-text — sylar, May 02 '14 at 16:47
@guest271314 - Sorry about that. I removed the image and pasted the text. — coding_hero, May 02 '14 at 16:51
Simple as pie: [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) You are breaking it — epascarello, May 02 '14 at 16:52
@epascarello - The external server is able to receive my JSON object, does that mean anything? — coding_hero, May 02 '14 at 17:54
Even if it were a same origin request, you should replace `complete` with `success`, since `complete` does not give you the data as a parameter, `success` does. — PhistucK, May 06 '14 at 17:54

score 4 · Accepted Answer · answered May 08 '14 at 15:54

It ended up being improper headers from the CastIron server. I had the CI admin fix the return code to '200 OK', and had her add the following headers:

Access-Control-Allow-Origin: *    
Access-Control-Allow-Headers: X-Requested-With

Turns out her response wasn't sending those headers. After reading up on CORS and Debugging CORS in Firebug, I was able to figure it out.

score 3 · Answer 2 · edited May 14 '14 at 09:31

3

Try this (pattern)

updated

$(function () {
    var callback = function (results) {    
        $("#output")
        .append("<p>Submitted successfully to server. Returned data: " 
        + JSON.stringify(results.caseURL) + "</p>")    
    };
    var myobj = {
        "caseURL": {
            "caseURL": "https://cs18.salesforce.com/50060000008ugtSAAQ"
        }
    };

    var request = $.ajax({
        url: "/echo/json/",
        data: {
            json: JSON.stringify(myobj)
        },
        type: "POST",
        dataType: "json"
    });
    request.done(function (data, textStatus, jqxhr) {
        if (textStatus === "success" && jqxhr.responseJSON) {
            console.log(data, jqxhr.responseJSON, jqxhr.responseText);
            if (data.hasOwnProperty("caseURL")) {
                callback(data)
            };
        };
    });
    request.fail(function (jqxhr, textStatus, error_text) {
        if (textStatus != "success") {
            console.log("Update unsuccessful. Status: ", error_text, 
            textStatus, jqxhr.getAllResponseHeaders());
        };
    });
})

updated jsfiddle

see

http://doc.jsfiddle.net/use/echo.html#json

http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings (data, dataFilter, processData)

http://api.jquery.com/jQuery.ajax/#sending-data-to-server

edited May 14 '14 at 09:31

joker

982
9
23

answered May 02 '14 at 19:24

guest271314

1
15
104
177

Looks promising, but it's returning 'Update unsuccessful. Status: (an empty string)'. The string I'm wanting is still after the 200 like it is in the screenshot. – coding_hero May 05 '14 at 22:15
If possible, can post request `url` ? Response from server `json` ? Thanks – guest271314 May 05 '14 at 23:28
Not sure what you mean. The URL is in my original code (`http://cirun2/Impact/CreateImpacts`), but is only accessible from our network. The response I'm expecting is after the '200' in the console. It looks like this: `{"caseURL":{"caseURL":"https://cs18.salesforce.com/50060000008ugtSAAQ"}}` – coding_hero May 06 '14 at 13:53
'Update uncuccessful. Status: ' (then an object that contains the statusText: `"[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://myserver.mycompany.com/mr/js/jquery-1.11.0.min.js :: .send :: line 4" data: no]"`. Same error as above. It's catching the 'fail' condition. – coding_hero May 06 '14 at 19:36
I think I need to convert to JSONP. I've emailed the CastIron admin to change what the reply looks like, and wrap it in a function call. – coding_hero May 06 '14 at 21:41

score 0 · Answer 3 · answered Jan 27 '15 at 20:17

The content type of a POST request is limited to application/x-www-form-urlencoded, multipart/form-data, or text/plain for CORS.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

See "Examples of access control scenarios">"Simple requests"

Please correct me if wrong.

JQuery and XHR -- Cross-site JSON POST with CORS

3 Answers3