1: 什么是同源策略
同源策略(same origin policy),是指浏览器处于安全方面的考虑,只允许在 同协议、同域名、同端口下的接口进行交互,不同源的客户端脚本在没有客户端授权下,不能读写对方资源,同源策略 有效阻止了一些危险行为。
2:什么是跨域?跨域有几种实现形式
跨域:js在不同域之间进行数据传输或者通信,比如AJAX向一个不同域请求数据,或者通过JS获取页面中不同域的框架数据。
跨域实现方法:jsonp CORS 降域 PostMessage
3: JSONP 的原理是什么
HTML中的Script标签可以引入其他域下的JS,利用这个特性,可以实现跨域访问接口。、
1.定义数据处理函数function
2.创建script标签,src的地址执行后端接口,最后加个参数callback=function
3.服务器收到请求后,解析参数,计算返还数据,输出function(data)字符串
4.function(data)会放到script标签作为js执行。此时胡调用函数,将data作为参数
4: CORS是什么
CORS是跨源资源共享(Cross-Origin Resource Sharing (CORS))。它是W3C委员会制定的一个新的标准,他的好处在于可以令开发者使用普通的XHLHttpRequest来发起请求与获取数据,而跨域的服务器端只需要在返回数据的时候设置Access-Control-Allow-Origin:即可。可以替换为任何已授权的域名。
五、演示四种跨域问题解决方法
JSONP 的使用
(1)动态创建 script 标签,src 地址指向数据接口,并传递 callback 参数
(2)定义数据处理函数
(3)服务端接收请求,解析参数,计算数,返回回调函数字符串
(4)将回调函数字符串引入页面并作为 JS 去执行:此时会调用数据处理函数,数据会作为数据处理函数的参数被处理计算出一个结果
CORS 的使用
(1)前端:正常使用 AJAX 发送请求(浏览器会自动加入请求头:Origin)
(2)服务端:若确定接受请求,则在返回结果中加入响应头:Access-Control-Allow-Origin
降域的使用
(1)A 页面域为:hello.ly.com;B 页面域为:hi.ly.com
(2)A 和 B 两页面都需加入该行代码:document.domain = 'ly.com'; ,ly.com 是hello.ly.com 和 hi.ly.com 的主域名
postMessage 的使用
(1)发送方:为目标元素添加事件处理程序,并发送 message
(2)接收方:为 window 添加事件处理程序,事件类型为 messag