Sencha 错误 XMLHttpRequest 无法加载 http://localhost.... Access-Control-Allow-Origin 不允许 Origin null

Posted 2023-02-26

【中文标题】Sencha 错误 XMLHttpRequest 无法加载 http://localhost.... Access-Control-Allow-Origin 不允许 Origin null

【英文标题】：Sencha Error XMLHttpRequest cannot load http://localhost.... Origin null is not allowed by Access-Control-Allow-Origin

【发布时间】：2011-07-27 07:31:48

【问题描述】：

我在加载煎茶商店时遇到问题。我的店铺声明是这样的：

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
);

我将商店保存在一个列表中：

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>'
    );

但是，当我尝试使用我的 JSON 文件加载列表时，我收到此错误：

XMLHttpRequest 无法加载 http://localhost:8080/A/carStore.html&callback=?&_dc=1311751412006&limit=25。 Access-Control-Allow-Origin 不允许 Origin null。 sencha-touch-debug.js:7212

未捕获的类型错误：无法读取未定义的属性“长度”

我将我的 JSON 文件保存为 html 格式，并保存在服务器中。如有任何帮助，我将不胜感激。

谢谢！

【参考方案1】：

您遇到了经典的 CORS 问题。

这是一种浏览器安全，称为网络安全。如果您处于开发模式，则可以运行 Chrome 并禁用此标志。但是如果你在浏览器上运行你的应用程序，你将需要绕过这个 ajax 规范限制。 要绕过它，您可以使用代理（例如在同一域上创建后端脚本将为您加载资源），或者您可以使用 JSON-P。为此，您需要将商店更改为脚本标签，但您还需要服务器能够检测回调参数并将其作为插入 DOM 时自动执行的 JS 函数发送给您。

我要补充一点，在 Phonegap 中运行时不会出现这个问题，因为 PhoneGap 没有运行 Web 服务器，而是使用 file:// 协议提供文件。

如果您想了解更多信息，我建议您在开发移动 Web 应用程序时使用常见的 pb，您应该了解 JSON-P 是什么、CORS 是什么以及它是如何工作的。

【参考方案2】：

发出 AJAX 请求时，您不能点击端口号 (8080)。如果您最终需要跨域请求，请将您的代理类型更改为“scripttag”。

【参考方案3】：

您应该将代理类型从 'ajax' 更改为 'type: 'scripttag'