写在前面的话
没有什么比每天进步一点点更踏实了~
(一)什么是跨域
跨域是a页面想要获取b页面资源,如果a,b页面的协议、域名、端口号、子域名不同,所进行的访问都是跨域的,而浏览器一般为了安全都限制了跨域访问,也就是不允许跨域访问资源。
(二)怎么解决
1、JSONP
JSONP是一个非官方协议,它允许在服务器端集成script tags返回至客户端,通过javascript callback的形式实现跨域访问。
基本思想:网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源策略限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。
2、window.name
window.name+iframe需要目标服务器响应window.name,window对象有一个name属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每个页面对window. name都有读写的权利,window.name 是持久存在一个窗口载入过的所有页面中的!
3、window.postMessage
HTML5引入了一个全新的API:跨文档消息传输Cross Document Messaging 。它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
otherWindow.postMessage(message, targetOrigin)
otherWindow:指目标窗口,也就是给哪个窗口发消息,是window.frames属性的成员或者由window.open方法创建的窗口。
参数说明:
(1)message:是要发送的消息,类型为string,object
(2)targetOrigin:是限定消息接收范围,不限制使用“ * ”
4.CORS
基本思想:使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
5.web sockets
web sockets是浏览器的一种API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。
欢迎给位大佬补充~
参考链接
https://www.jianshu.com/p/451e575a3a8a
https://www.imooc.com/article/309326
同源策略:https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
网友评论