Question

I have searched around on the forums and read some other posts. However, I’m not sure how exactly to go about this. I have a store with a proxy that I’m trying to load with data from a server. I have tried both jsonp and rest for the type of proxy without luck. In both cases I get a 403 forbidden error. followed by an XMLHTTPRequest cannot load error.

Here’s the error that I see in the Chrome console:

Here’s my code:

Ext.define('EventsTest.store.Venues', {
    extend: 'Ext.data.Store',


    requires: [
        'Ext.data.proxy.Rest',
    ],


    config: {
        storeId: 'venuesStore',
        model: 'EventsTest.model.Venue',
        proxy: {
            type: 'rest',
            url: 'http://leo.web/pages/api/',
            headers: {
                'x-api-key': 'senchaleotestkey'
            },
            limitParam: false,
            pageParam: false,
            enablePagingParams: false
            /*
            extraParams: {
                latitude: 45.250157,
                longitude: -75.800257,
                radius: 5000
            }
            */
        }
    }
});

Answer 1

Security policy in browser and desktop is different so even if it fails in browser it can work in phone. But now the question is how to manage while you are developing the app, for that have a look at this similar question :

How to use json proxy to access remote services during development

Regarding that OPTION request which is getting 403 response, try setting withCredentials : false and useDefaultHeader : false. Details here

http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Operation-cfg-withCredentials
http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Connection-cfg-useDefaultHeader

I would suggest you to read more about CORS if you want to use remote services, you may choose to enable CORS on your server.