（转）HTML5开发中Access-Control-Allow-Origin跨域问题

时间：2023-01-16 15:55:28

今天准备通过JavaScript的方式调用问说问答的内容，由于使用的不同的二级域名，遇到了一个跨域问题，虽然可以使用JSON或者XML来解决这个问题，但是我们可以通过Access-Control-Allow-Origin解决跨域问题，下面一起来看看Access-Control-Allow-Origin跨域问题的解决方法。

什么是跨域？

顾名思义，跨域就是不同的域名下的资源访问，会被浏览器的本地安全策略阻止，例如www.uedsc.com去AJAX请求一个wenda.uedsc.com的资源，他们实际上是不同的两个二级域名，*域名是uedsc.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语言，则在页面头部加入，注意一定是在没有输出任何信息之前：

// 指定可信任的域名来接收响应信息，推荐

header('Access-Control-Allow-Origin:http://A.abc.com');

或者你可以设置响应任意域名的资源

// 使用通配符 * ，表示当前服务端通话任何域名发起请求，不推荐

header('Access-Control-Allow-Origin:*');

就这样在服务端简单加一句响应头responese headers声明，一个跨域请求就不会被浏览器的同源安全策略所阻止了！

注意

添加响应头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，还得继续补增响应头：

header('Access-Control-Allow-Credentials:true');

需要将 XMLHttpRequest 对象的 withCredentials 属性设置为 true，JQuery1.5.1+ 就开始提供了相应的字段，使用方式如下：

$.ajax({

    url:"B.abc.com",

    xhrFields:{

        withCredentials:true

    },

    crossDomain:true

});

设置 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，重启浏览器即可

相关文章