跨域相关的一二三
1.为什么会出现跨域
首先要了解浏览器的同源策略,经过查看资料了解,他就是一个安全策略。
所谓同源就是指他的协议,域名,端口相同。
例如:现在有一个网址http://www.test.com/page/index.html
https://ww.test.com/page/index.html //不同源,协议不同
http://www.practice.com/page/index.html //不同源,域名不同
http://www.test.com:8080/page/index.html //不同源,端口不同
所以,如果不是同源的,就不能对他之下的对象进行操作
2.同源策略有哪些限制
(1)cookie,localstorage,indexDB无法读取
(2)无法获取DOM
(3)ajax请求无法发送
3.不受同源限制的
(1)页面中的链接,重定向以及表单提交是不会受到同源策略限制的。
(2)嵌入到页面中的<script src="..."></script>,<img>,<link>,<iframe>等。
4.解决方法
(1)通过JSONP
基本思想是,添加一个<script>,向服务器发送请求,不受同源限制。例如,a.com/jsonp.html想访问b.com/main.js,就在a的jsonp.html中创建一个回调函数,动态添加<script>元素,向服务器发出请求,请求地址为b.com/main.js,在地址后加上查询字符串,通过callback参数指定函数,为b.com/main.js?callback=xxx,在main.js中调用这个回调函数xxx,并以json数据形式作为参数传递,完成回调。
(2)document.domain
适用于主域名相同。
(3)window.name
window.name+iframe需要目标服务器响应window.name。
window对象有个name属性,在一个窗口周期,窗口载入的所有页面都共享一个window.name,每个页面都对他有读写权限,window.name持久存在于一个窗口载入过的所有页面。
(4)window.postMessage
跨文档消息传输
(5)CORS
cross-origin resource sharing 跨资源分享
是跨域AJAX请求的根本解决方法
优点:jsonp只能发送get请求,而cors允许任何类型的请求。开发者可以使用普通的XMLhttpRequest发送请求和获取数据,有更好的错误处理。jsonp主要被老的浏览器支持。
(6)Ngnix反向代理