HTML5中Access-Control-Allow-Origin解决跨域问题

跨域在开发中一些是一个比较常见的问题虽然有json或者xml来解决，如今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.js http://www.a.com/b.js	同一域名下	容许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不一样文件夹	容许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不一样端口	不容许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不一样协议	不容许
http://www.a.com/a.js http://170.32.82.74/b.js	域名和域名对应ip	不容许
http://www.a.com/a.js http://script.a.com/b.js	同一域名，不一样二级域名	不容许
http://www.a.com/a.js http://a.com/b.js	二级域名和一级域名	不容许（cookie这种状况下也不容许访问）
http://www.b.com/a.js http://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请求查看面板中能够看到，相似以下截图：cors

须要注意的是：

添加响应头responese headers时，容许跨域请求的域名带不带斜杠/仍是有区别的，带斜杠/会报错：
XMLHttpRequest cannot load  abc.com/B. The 'Access-Control-Allow-Origin' header has a value 'http://A.abc.org/' that is 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，能够做为一种跨域请求以及响应的解决方案。

附：

禁用chrome本地安全策略,不用配服务器环境也能发起ajax请求：chrome 桌面快捷键 右键属性 在快捷方式标签下的“目标”框中加入 --disable-web-security，重启浏览器便可