错误现象:

      下载了jQuery UI的插件Wijmo,然后在本地运行,但是Chrome浏览器无法显示部分效果,无法加载部分文件(通过审查元素—>控制台查看),Firefox中显示正常。

错误信息:

XMLHttpRequest cannot load file:///home/cf/IdeaProjects/fei/src/Wijmo-Pro.3.20131.7/Samples/WidgetExplorerMobile/samples/bubblechart/overview.html. Origin null is not allowed by Access-Control-Allow-Origin.

原因:

Chrome浏览器不支持本地ajax访问,具体就是ajax不能访问file这样的,估计发布就可以了

解决办法:

有以下3种解决办法:

一、将整个目录放到tomcat服务器的webapps目录下,启动tomcat服务器,浏览器中输入localhost:8080/A/a.html(这种方法最简单)


二、将html5的程序做成 chrome的扩展程序,该扩展程序的扩展文件名为.crx.

例如我想访问A目录下的a.html后发生错误,则进行如下操作(这种方法存在一个缺陷:每次更改html页面内容后需要重新打包扩展程序):

1, 在程序根目录(/A)下面增加一个manifest.json 文件:

文件格式为:

{

"name": "DemoApp",

 "description": "Demo",

 "version": "0.1",

 "app": {

   "launch": {

     "local_path": "***.html"

   }

 },

 "permissions": [

   "unlimitedStorage"

 ]

}

2,将该程序利用chrome打包。打开chrome,在设置按钮中选择工具>扩展程序,或者在地址栏输入chrome://extensions/. 如图:



3,点击扩展程序,开始打包html程序:


4.点击浏览到/A目录下,私有密钥文件可忽略,打包扩展程序

错误:XMLHttpRequest cannot load file_第1张图片


5.弹出对话框打包成功,显示A.crx所在位置。成功后,来到/A目录的上一级目录,可以看到A.crx文件。

将该文件直接拖拽到chrome浏览器中,在浏览器下部区域会弹出如下所示对话框,选择继续。


6.弹出对话框如下所示:点击添加。

错误:XMLHttpRequest cannot load file_第2张图片


7.浏览器将自动打开一个新标签页,如下图所示,点击DemoApp的图标

错误:XMLHttpRequest cannot load file_第3张图片


8.浏览器会出现如下图所示错误信息:(此属于正常)

错误:XMLHttpRequest cannot load file_第4张图片


9.这时在浏览器中输入如上图所示url。此处我输入chrome-extension://bbbhibcamhjnikmjlibhinpkamoddnlh/a.html

即会显示/A/a.html的内容信息,成功。

参考:http://www.iteye.com/topic/825714,里面是让Chrome支持本地ajax访问


三、修改chrome的属性值。

       此方法适应于任何系统,只是不同系统的操作方法不同,此处由于本人使用的linux系统,仅提供linux下操作方法。

       首先,关闭chrome浏览器。

       其次,打开终端terminal。

       再次,输入命令google-chrome --disable-web-security或者google-chrome  --allow-file-access-from-files,将触发系统重新启动chrome浏览器,此时直接输入file:///home/cf/A/a.html就可以看到正常显示效果。


参考网址:

http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin

http://stackoverflow.com/questions/3102819/chrome-disable-same-origin-policy

希望能给同样遇到此问题的朋友们起到一点帮助~^_^