1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      0  

    Default ExtJS 4.1 Ajax Cross-site POST request - empty responseText and status 0

    ExtJS 4.1 Ajax Cross-site POST request - empty responseText and status 0


    Hi all,

    I am testing cross-site AJAX post request like this:

    Code:
    Ext.Ajax.request({
                    params: {
                            id: 1
                    },
                    method: "POST",
                    cors: true,
                    scope: this,
                    withCredentials: true,
                    useDefaultXhrHeader: false,
                    url: myapp.main.settings.api_url + "?action=saveGridSettings",
                    success: function(response,opt) {
                            console.log("ok");
                            alert("ok");
                    },
                    failure: function(response,opt) {
                            console.log("bad");
                            console.log(response);
                            alert("BAD");
                    }
            });
    Browser create OPTIONS request, then POST request, server send code 200 and return data, but ExtJS everytime fire "failure" function. Status code is 0 and responseText is empty. What can be wrong?

  2. #2
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,408
    Vote Rating
    179
    LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold LesJ is a splendid one to behold

      0  

    Default


    We use these default Ajax configs, and this works for us at least on the latest Chrome and Firefox.

    Code:
    Ext.apply(Ext.Ajax, {
        defaultHeaders: {
            Accept: 'application/json',
            'Content-Type': 'application/json'
        },
        useDefaultXhrHeader: false,
        cors: true
    });

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      0  

    Default


    My code does not work well for the GET request.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      1  

    Default


    Whenever I've seen a status code of 0 for a CORS request it's because I hadn't included the required headers in the server response.

    To avoid the OPTIONS request I use:

    Code:
    Ext.Ajax.cors = true;
    Ext.Ajax.useDefaultXhrHeader = false;

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      0  

    Default


    But in my code I am using this properties - look at my code in first post.

    On serverside I have right code for cross-site request (snip from python code):

    Code:
                    if (req.method == "OPTIONS"):
                            req.headers_out["Access-Control-Allow-Credentials"] = "true"
                            req.headers_out["Access-Control-Allow-Origin"] = "https://myapp.mydomain.tld"
                            req.headers_out["Access-Control-Allow-Headers"] = "content-type,x-requested-with"
                            req.headers_out["Access-Control-Allow-Methods"] = "POST, GET, OPTIONS"
                            req.headers_out["Access-Control-Max-Age"] = "1728000"
                            req.send_http_header()
                    elif (req.method == "POST"):
                            req.write('{"success":true}')
                    elif (req.method == 'GET'):
                            req.write('{"success":true}')

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The useDefaultXhrHeader setting should be set of the Ajax instance, not passed to the request method.

    The cors setting only has an effect on IE, other browsers don't care. You'll need ExtJS 4.2.0+ if you want that setting to work correctly, or you'll have to patch it up (you can find the patch if you search the forums).

    It looks like you aren't returning the headers for the GET/POST request itself. I believe that explains what you've observed.

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    15
    Vote Rating
    1
    citron is on a distinguished road

      0  

    Default


    Thanks skirtle, it is working for now. But when my server return error code (eg. 501, 403, ...), EXTjs always fire "success" function.

    I am trying to send from server {"success":false} but this still fire "success" function.

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,616
    Vote Rating
    327
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I would have expected returning a status code of 501 or 403 to have caused the failure callback to be called, I don't know why that isn't working for you. However, if you need support for IE8 or IE9 then you'll be using XDR, which won't allow access to the response data if you use an error code. For that reason I tend to handle errors using a 200 code and success: false in the data instead so that I can pass on full error details in the JSON.

    Ext.Ajax has no understanding of a success property, or even JSON for that matter. Proxies have that functionality via their reader. I tend to wrap all my direct calls to Ext.Ajax in my own function that decodes the JSON and checks the success property before calling the success or failure callback.

    Another trick I often use is to replace direct calls to Ext.Ajax with load/save requests on a model. Sometimes it's overkill but if there are several fields to process it's often easier to let a reader or writer handle it for you.

Thread Participants: 2

Tags for this Thread