4

I am trying to get data from web services from my app to load a list and to load more on scroll using pull refresh & ListPaging plugins. I tried this with flickr API and it works fine, but problem comes when I try to access our own services because they expect "Authorization" header with Base64 encoded data and "Accept" header to decide format of response.

This is how I have defined my store:

Ext.define('myshop.store.CatalogListStore',{
    extend:'Ext.data.Store',
    requires: [
        'myshop.model.CatalogListItem'
    ],
    config:{
        model:'myshop.model.CatalogListItem',
        autoLoad :true,
        proxy: {
            type: 'jsonp',
            url: 'http://192.168.23.89:7003/xxx-service/test/catalog/list',
            useDefaultXhrHeader : false,
            withCredentials:true,
            method : 'GET',
            headers: {
                'Accept': 'application/json',
                'Authorization': 'Basic YX5iOmM='
            },
            extraParams: {
                format : 'json',
                pagesize : 10
            },
            reader: {
                type: 'json',
                rootProperty: 'categories.data'
            }
        }
    }
}

This is what I see in Chrome's network console:

Request URL:http://192.168.23.89:7003/xxx-service/test/catalog/list?_dc=1354529083930&format=json&pagesize=10&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback2
Request Method:GET
Status Code:403 Forbidden
**Request Headers**
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Host:192.168.23.89:7003
Referer:http://localhost/myshop/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/536.11 (KHTML, like Gecko) Ubuntu/12.04 Chromium/20.0.1132.47 Chrome/20.0.1132.47 Safari/536.11
**Query String Parameters**
_dc:1354529083930
format:json
pagesize:10
page:1
start:0
limit:25
callback:Ext.data.JsonP.callback2
Response Headersview source
Content-Length:0
Content-Type:text/xml
Date:Mon, 03 Dec 2012 10:04:40 GMT
Server:Apache-Coyote/1.1

If I use Poster to access these services with Authorization header I am able to see response but since Headers are not passed in request I am getting "403 forbidden" status.

If I use headers like this it works :

Ext.Ajax.request({
        url: 'resources/data/templates.json',
        headers: {
            'Accept': 'application/json',
            'Authorization': 'Basic T3JkZXJSZWxlYXNlUmVmcmVzaGVyfk9yZGVyUmVsZWFzZVJlZnJlc2hlcjpPcmRlclJlbGVhc2VSZWZyZXNoZXI='
        },
        success: function(rsp){
        }
});

but I cannot do this because I want to use listPaging plugin.

ThinkFloyd
  • 4,981
  • 6
  • 36
  • 56

1 Answers1

1

JSONP Works buy inserting the request URL as a in the the page header, if you need to authenticate your request, you will have to put it in the URL eg:

'http://192.168.23.89:7003/xxx-service/test/catalog/list?auth=1223456'

Are you certain you need to use JSONP?

See this answer for more info

Community
  • 1
  • 1
Adam Marshall
  • 5,895
  • 2
  • 22
  • 22
  • I also thought of the same but I don't want to send auth credentials in url. In addition of authentication, I also want to send some context information using cookies, "accept" & "content-type" headers to tell what should come as response(xml/json) but not sure if that'll work. – ThinkFloyd Dec 21 '12 at 06:35
  • > Are you certain you need to use JSONP? My services will run on some servers in cloud and my app is going to run on mobile phones or some other servers which may/may not be in the same cloud & domain, so what are my options apart from jsonp? – ThinkFloyd Dec 21 '12 at 06:36
  • 1
    The phones security model differs from the browser with regards to Cross domain policy esp if the html/JavaScript is bundled in the "native" builds so you should check that out too. – Adam Marshall Jan 01 '13 at 22:41
  • Can you please elaborate on difference? Do you mean to say that if I am going to package this as phonegap build then I can use JSON proxy instead of JSONP? How do you test it during development because I use my laptop's browser(it provides lot of debugging tools) for that and once phonegap build is done I have to use phone for debugging also. – ThinkFloyd Jan 02 '13 at 05:43
  • Ok so here is the thread which talks about JSON proxy working in mobile but not in desktop http://stackoverflow.com/questions/7440725/how-ajax-call-is-working-in-mobile-app-phonegap-but-not-in-pc-browser . So that means now I have to figure out how to do development on my desktop using JSON proxy. – ThinkFloyd Jan 02 '13 at 06:21
  • the only reliable way is to create a "web proxy" on your domain that can make a request from the other domain, you can then include the authorization headers you require. – Adam Marshall Jan 02 '13 at 23:30