Ajax本地跨域问题

配置chrome支持本地(file协议)ajax请求

配置chrome支持本地(file协议)ajax请求 网址:配置chrome支持本地(file协议)ajax请求

将html代码拖拽进入chrome通过file协议浏览时,发送的ajax请求本地文件,会报跨域错误。
XMLHttpRequest cannot load file:///E:/webs/extJS/ext-3.3.0/examples/csdn/combobox.txt?_dc=1414738973999.
Cross origin requests are only supported for protocol schemes: http, data,
chrome-extension, https, chrome-extension-resource.

解决办法是给chrome添加启动参数:--allow-file-access-from-files ,这样本地ajax请求就不会报跨域错误了。
(注意如果给chrome添加多个启动参数,每个启动参数“--”之前要有空格隔开,
如"C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-file-cookies --allow-file-access-from-files)

如何添加chrome启动参数以便支持file协议下的ajax请求,
具体看这个:chrome无法保存本地设置cookie解决办法

添加了--allow-file-access-from-files启动参数后,
还可以解决本地file加载文件,导致iframe和父页无法相互访问,
window.open打开的页面使用opener为null的问题,参考:chrome本地测试访问iframe,parent,opener null解决办法


将html代码拖拽进入chrome通过file协议浏览时,发送的ajax请求本地文件,会报跨域错误。

ajax.js:18 XMLHttpRequest cannot load file:///E:/workspace/src/JavaScript_src/films.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

  解决办法是给chrome添加启动参数:--allow-file-access-from-files ,这样本地ajax请求就不会报跨域错误了。(注意如果给chrome添加多个启动参数,每个启动参数“--”之前要有空格隔开,如"C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-file-cookies --allow-file-access-from-files

 

  如何添加chrome启动参数以便支持file协议下的ajax请求,具体看这个:chrome无法保存本地设置cookie解决办法

 

  添加了--allow-file-access-from-files启动参数后,还可以解决本地file加载文件,导致iframe和父页无法相互访问,window.open打开的页面使用opener为null的问题,参考:chrome本地测试访问iframe,parent,opener null解决办法



Ajax本地跨域问题 Cross origin requests are only supported for HTTP


问题:打开本地html文件时,报错如下

Cross origin requests are only supported for protocol schemes: http, data,chrome-extension, https, chrome-extension-resource.

分析:
浏览器为了安全性考虑,默认对跨域访问禁止。

解决:
给浏览器传入启动参数(allow-file-access-from-files),允许跨域访问。Windows下,运行(CMD+R)或建立快捷方式:
"C:/Program Files (x86)/Google/Chrome/Application/chrome.exe" --allow-file-access-from-files

参考资料:https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local/23758738#23758738



错误:XMLHttpRequest cannot load file

错误现象:

      下载了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/如图:

Ajax本地跨域问题_第1张图片



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


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

Ajax本地跨域问题_第2张图片


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

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


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

Ajax本地跨域问题_第3张图片


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

Ajax本地跨域问题_第4张图片


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


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

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

<!--[endif]-->

参考: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

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

本文出自 “飞翔的天空” 博客,请务必保留此出处http://frabbit2013.blog.51cto.com/1067958/1254285



在写一个用传统javascript实现ajax例子的时候,在chrome中遇到了一个问题:

        XMLHttpRequest cannot loadfile:///C:/Users/Administrator/Desktop/test.php.Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.

  Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Administrator/Desktop/test.php'.

        这是因为Chrome不支持本地的异步请求,因此直接通过file://访问文件就会报错!

解决办法:

        右击chrome快捷方式,选择“属性”,在“快捷方式”下的“目标”中添加" --allow-file-access-from-files"(最前面有个空格),重启chrome即可。

        Ajax本地跨域问题_第5张图片




你可能感兴趣的:(Ajax本地跨域问题)