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

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:'drive开发者_如何转开发r', 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!

---

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.

---

You can't hit a port number (8080) when making an AJAX request. If you end up needing a cross-domain request change your proxy type to 'scripttag'.

---

You should change the proxy type from 'ajax' to 'type: 'scripttag'