错误现象:
下载了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",sans-serif;font-size:14px;line-height:25px;text-align:left;background-color:white"> "version": "0.1",sans-serif;font-size:14px;line-height:25px;text-align:left;background-color:white"> "app": {
"launch": {
"local_path": "***.html"
}
},sans-serif;font-size:14px;line-height:25px;text-align:left;background-color:white"> "permissions": [
"unlimitedStorage"
]
}
2,将该程序利用chrome打包。打开chrome,在设置按钮中选择工具>扩展程序,或者在地址栏输入chrome://extensions/. 如图:
3,点击扩展程序,开始打包html程序:
4.点击浏览到/A目录下,私有密钥文件可忽略,打包扩展程序
5.弹出对话框打包成功,显示A.crx所在位置。成功后,来到/A目录的上一级目录,可以看到A.crx文件。
将该文件直接拖拽到chrome浏览器中,在浏览器下部区域会弹出如下所示对话框,选择继续。
6.弹出对话框如下所示:点击添加。
7.浏览器将自动打开一个新标签页,如下图所示,点击DemoApp的图标
8.浏览器会出现如下图所示错误信息:(此属于正常)
9.这时在浏览器中输入如上图所示url。此处我输入chrome-extension://bbbhibcamhjnikmjlibhinpkamoddnlh/a.html
<!--[endif]-->
参考:http://www.iteye.com/topic/825714,里面是让Chrome支持本地ajax访问
此方法适应于任何系统,只是不同系统的操作方法不同,此处由于本人使用的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/3102819/chrome-disable-same-origin-policy
希望能给同样遇到此问题的朋友们起到一点帮助~^_^
原文链接:https://www.f2er.com/ajax/166084.html