1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
    shri_iitk is on a distinguished road

      0  

    Default Unanswered: How to send http headers while using jsonp proxy?

    Unanswered: How to send http headers while using jsonp proxy?


    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:

    Code:
    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:

    Code:
    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 :

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


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



  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    You won't be able to as JsonP uses a <script> tag. I would recommend using Ajax and having your server support CORS.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
    shri_iitk is on a distinguished road

      0  

    Default


    For time being I have disabled Authorization header requirement and moved ahead with JSONP but I am sure in future I have to come back and see how to add CORS support to my server. If you know how to do that in CXF based web-services served by tomcat, please let me know.

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
    shri_iitk is on a distinguished road

      0  

    Default


    But what's the problem in supporting HTTP headers in JSONP because it seems like legitimate requirement from my point of view. More and more apps are talking to web services these days and server management team never feels comfortable enabling CORS on production servers, so having this feature will make life simpler.