Sencha Error XMLHttpRequest cannot load http://localhost.... Origin null is not allowed by Access-Control-Allow-Origin

Question

I'm having a problem with loading a Sencha store. My store declaration is like this:

Ext.regModel('Car',{

        idProperty: 'id', 
        fields: [
                 //'id', 'company', 'driver', 'carType','xCoordinate','yCoordinate'                  
                 {name: 'id', type: 'int'},
                 {name:'company', type:'string'} ,
                 {name:'driver', type:'string'},
                 {name:'carType', type:'string'},
                 {name:'xCoordinate', type:'int'},
                 {name:'yCoordinate', type:'int'}

                 ]                                   

    });

var strr= new Ext.regStore({

        id:'carStore',
        model:'Car',    //configuration option is the cars

        proxy: {
             type: 'ajax',
              url: 'http://localhost:8080/A/carStore.html&callback=?',
              reader: {
                type: 'json',
                root: 'carss'
              },
        },
        autoLoad: true
});

And I'm keeping the store in a list:

CarManagementSystem.views.carList = new Ext.List({
        id: 'carList',
        store: 'carStore',

        onItemDisclosure: function (record) {

            var selectedCar = record;
            CarManagementSystem.views.addNewCar.load(selectedCar);
            CarManagementSystem.views.viewport.setActiveItem('addNewCar', { type: 'slide', direction: 'left' });
        },
       itemTpl: '<div class="list-item-id">{id}</div>' +'<div class="list-item-driver">{driver}</div>'
    });

However, when I try to load the list with my JSON file, I get this error:

XMLHttpRequest cannot load http://localhost:8080/A/carStore.html&callback=?&_dc=1311751412006&limit=25. Origin null is not allowed by Access-Control-Allow-Origin. sencha-touch-debug.js:7212

Uncaught TypeError: Cannot read property 'length' of undefined

I'm keeping my JSON file in an html format and it is kept in the server. I'd appreciate any help.

Thanks!

Florent Lamoureux Florent Lamoureux · Accepted Answer · 2013-08-08T22:46:43

You are encountering the classic CORS issue.

It's a browser security, called web-security. If you are in dev mode, you can run Chrome and disabling this flag. But if you run your app in production on a browser, you will need to bypass this ajax specification restriction.
To bypass it, you can use proxys (such as creating a back-end script on the same domain will load for you the resource) or you can use JSON-P. For this you will need to change your store to a script tag BUT ALSO you will need the server to be able to detect a callback param and send it to you as a JS function automatically executed when inserted in the DOM.

I will add that you won't have this issue when running in Phonegap because PhoneGap is not running a web server but serves files with the file:// protocol.

If you want to learn more, and I recommand as it is a common pb when developing mobile web apps, you should learn what JSON-P is, what CORS is, and how it works.

Sencha Error XMLHttpRequest cannot load http://localhost.... Origin null is not allowed by Access-Control-Allow-Origin

3 Answers