ExtJS 4.2.1: Cannot retrieve HTTP Response headers upon Ext.ajax.request callback

Question

I'm trying to read the headers of the coming response upon Ext.ajax.request.

Here it is the code:

Ext.Ajax.request({ url: 'http://localhost:3000/v0.1/login' ,
    method: 'POST',
    scope:this,
    jsonData: {"_username":username,"_userpwd":password},
    success: function(responseObject){
        var headers = responseObject.getAllResponseHeaders();
        console.info(headers );
        Ext.destroy(Ext.ComponentQuery.query('#loginWindow'));
        this.application.getController('SiteViewController').showView();
    },
    failure: function(responseObject){
        alert(responseObject.status);
    }
    });

But the only header that it is printed out in console is:

Object {content-type: "application/json; charset=utf-8"} 

All the other headers are missing, but they are present in the chrome inspector!!!

What am I missing? Thanks

Answer 1

Because you're probably doing a cross-domain request, you will only have headers explicitly exposed by the server. Same domain requests expose all the headers.

On the server side you have to add the header "Access-Control-Expose-Headers" with the exhaustive list of headers you want to expose, separated by a coma. In php it would look like this:

header("Access-Control-Expose-Headers: Content-length, X-My-Own-Header");

The headers will indeed be available through responseObject.getAllResponseHeaders() or something like responseObject.getResponseHeader('content-type').

More information about cross-domain requests and headers: http://www.html5rocks.com/en/tutorials/cors/

PS: Ace.Yin had the right answer, but I don't have enough reputation to simply comment.