大佬教程收集整理的这篇文章主要介绍了HTML5 Access-Control-Allow-Origin解决跨域问题,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
跨域请求:
A.abc.com 发起一个到 abc.com/B 的ajax请求,也会有跨域的问题。之所以会有跨域问题,实则是因为www.abc.com其实同A.abc.com一样,也是一个二级域名,而非一级域名(一级域名是http://abc.com)。
对于是否允许跨域,更详细的说明可以看下表:
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.jshttp://www.a.com/b.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.jshttp://www.a.com/script/b.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.jshttp://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
http://www.a.com/a.jshttps://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
http://www.a.com/a.jshttp://170.32.82.74/b.js | 域名和域名对应ip | 不允许 |
http://www.a.com/a.jshttp://script.a.com/b.js | 同一域名,不同二级域名 | 不允许 |
http://www.a.com/a.jshttp://a.com/b.js | 二级域名和一级域名 | 不允许(cookie这种情况下也不允许访问) |
http://www.b.com/a.jshttp://www.a.com/b.js | 不同域名 | 不允许 |
解决方法:
若在接收请求的服务端abc.com/B页面用的是PHP语言,则在页面中加入:
// 指定可信任的域名来接收响应信息,推荐 <?PHP header('Access-Control-Allow-Origin:http://A.abc.com'); ?>
或加入
// 使用通配符 * ,表示当前服务端通话任何域名发起请求,不推荐 <?PHP header('Access-Control-Allow-Origin:*'); ?>
就这样在服务端简单加一句响应头responese headers声明,一个跨域请求就不会被浏览器的同源安全策略所阻止了!
用chrome调试工具Network ajax请求查看面板中可以看到,类似如下截图:
需要注意的是:
添加响应头responese headers时,允许跨域请求的域名带不带斜杠/还是有区别的,带斜杠/会报错:
XMLhttprequest cAnnot load abc.com/B. The 'Access-Control-Allow-Origin' header has a value 'http://A.abc.org/' thatis not equal to the supplied origin. Origin 'http://A.abc.org' is therefore not allowed access.
header('Access-Control-Allow-Origin:*');是html5新增的一项标准功能,因此 IE10以下 版本的浏览器是不支持 的,因此,如果要求兼容IE9或更低版本的ie浏览器,会导致使用此种方式的跨域请求以及传递Cookie的计划夭折,最终还得回归JSONP(目前主流的处理方式是使用JSONP,易于实现,兼容性好,可查的资料也很多。)
跨域解决后,如果还要操作Cookie,还得继续补增响应头:
<?PHP header('Access-Control-Allow-Credentials:true'); ?>
需要将 XMLhttprequest 对象的 withCredentials 属性设置为 true,JQuery1.5.1+ 就开始提供了相应的字段,使用方式如下:
$.ajax({ url:"B.abc.com",xhrFields:{ withCredentials:true },crossDomain:true });
哦也~ 收到 Cookie 了。
设置 withCredentials 为 true 的请求中会包含 A.abc.com端的所有Cookie,这些Cookie仍然遵循同源策略,所以,你只能访问其中和 abc.com/B同根域的Cookie,而无法访问其他域的Cookie。
Access-Control-Allow-Origin实则是html5 Cross-Origin resource Sharing实现的最重要的一点参数配置。
Cross-Origin resource Sharing,跨域资源共享,简称 CORS,可以作为一种跨域请求以及响应的解决方案。
Cross-Origin resource Sharing 详细解释及更多的响应头responese headers声明:
w3:http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html
firefox:https://developer.mozilla.org/En/http_access_control
ie10:http://blogs.msdn.com/b/ie_cn/archive/2012/02/14/ie10-cors-for-xhr.aspx
附:
禁用chrome本地安全策略,不用配服务器环境也能发起ajax请求:
chrome 桌面快捷键 右键属性 在快捷方式标签下的“目标”框中加入 --disable-web-security,重启浏览器即可。
http://www.cnblogs.com/MyRobotDream/p/3543402.html
以上是大佬教程为你收集整理的HTML5 Access-Control-Allow-Origin解决跨域问题全部内容,希望文章能够帮你解决HTML5 Access-Control-Allow-Origin解决跨域问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。