由于浏览器处于安全考虑,在不同源的情况下,且未被许可时,一个网页使用只允许在本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源。这就是同源策略。
同源策略(Same origin Policy):
本域的要求包括:
- 同协议名:都是 http 或都是 https 。
- 同域名:域名必须完全相同。
- 同端口:端口必须完全相同。
ajax也受到同源策略的束缚。
所以在某些情况下,只能使用JSONP或CORS等方式来解决问题。
需要注意一点的是:对于当前页面来说页面存放的 JS 文件的域不重要,重要的是加载该 JS 页面所在什么域
跨域的几种实现形式
JSONP
HTML中的script标签可以引入其他域下的JS(不仅如此,凡是src这个属性的标签,如img、script、iframe都具有跨域的能力),利用这个能力即可做到跨域的效果。
1、定义数据处理函数funN
2、创建script标签,其中src属性根据根据需求设定
3、由于后端不知道前端数据处理函数的函数名,所以在src中添加callback=funN
4、当后台数据传输过来后,将会以funN(data)的形式对funN进行调用,其data则是我们需要的参数。
CORS(Cross-Origin Resource Sharing)
CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。
1、当你使用 XMLHttpRequest 发送请求时,浏览器发现该请求不符合同源策略,会给该请求加一个请求头:Origin。
2、后台在返回结果中加入一个响应头:Access-Control-Allow-Origin。
3、浏览器判断该相应头中是否包含 Origin 的值,如果有则浏览器会处理响应,我们就可以拿到响应数据,如果不包含浏览器直接驳回,这时我们无法拿到响应数据。
所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别,代码完全一样。
事实上,只要你去发送请求,后台都会返回请求,但是浏览器会进行验证,你发送的请求是否是被允许的。
降域
两个二级或以上域名网址想要跨域时,可以通过降域,降至同一层域名,即可跨域。
如:http://a.jrg.com 与 http://b.jrg.com之间因为非同源,所以不能跨域。在两个页面下都加入如下代码,进行降域,这两个网站则可相互进行跨域。
document.domain = 'jrg.com'
postMessage
两个不同域名下的页面之间,不相互读取数据或进行页面操作,只是相互发送数据,即可用postMassage。