谷歌浏览器--请求的资源未提供Access-Control-Allow-Origin头部信息

Question

我正在尝试创建一个从json文件中获取数据的jquery表格。在Firefox中运行良好，但在Google Chrome上无法正常工作。 我是从trirand examples开始做这个的。

我正在提供获取json数据的代码。

jQuery("#rowed2").jqGrid({
    url:'datagrid_data.json',
    datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90},
        {name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},      
        {name:'total',index:'total', width:80,align:"right"},       
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#prowed2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#rowed2").jqGrid('navGrid','#prowed2',{edit:false,add:false,del:false});

- ess

Answer 1

如果我理解正确你的问题：在Google Chrome中，您无法通过Ajax请求访问本地文件。这是出于设计原因。如果您确实需要更改行为，则必须使用附加参数--allow-file-access-from-files（'-'应写两次）启动Chrome.exe：

Chrome.exe --allow-file-access-from-files

在启动之前，重要的是您必须关闭所有当前运行的Chrome.exe实例。在这种启动安全功能期间，您不喜欢的功能将被关闭，您将能够通过Ajax访问本地文件。

Chrome.exe选项列表在此处有描述（也请参见此处）。

- Oleg

Answer 2

设置和读取访问控制来源头部以控制浏览器跨域访问数据。这是一个安全问题。

在不使用CORS（跨域请求共享）头部的情况下，无法从与脚本运行的不同域访问JSON。

有几种绕过此限制的方法。

最常见的是在服务器端启用访问控制来源头部。这个服务器设置告诉浏览器它们可以自由地使用JSON数据，通常是因为它不敏感。http://enable-cors.org/

CORS的另一种常见方法是以JSONP格式传递您的数据。这是另一种在客户端执行的服务器端修复方法，它将JSON数据包装在一个函数中。JSONP是什么？

- Patrick Gunderson

---

感谢@Patrick Gunderson。我没有在服务器上运行此文件。我正在使用静态HTML和jQuery（例如：http://trirand.com/blog/jqgrid/jqgrid.html#）。它在Firefox上运行良好。但在Chrome上无法工作。 - ess

你是通过 file:// 访问文件的吗？这可以解释为什么 Firefox 和 Chrome 的行为不同。其中一个在本地文件上尊重 CORS，而另一个则不尊重。 - Patrick Gunderson

你可以通过 file:/// 访问文件。 - ess

我敢打赌，如果你把文件放在服务器上（即使是本地服务器），它也会被FF和Chrome拒绝。 - Patrick Gunderson