Day 43/100 前端基础之跨域（5种）未完待续

写在前面的话

没有什么比每天进步一点点更踏实了~

（一）什么是跨域

跨域是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