面试准备 通信类

同源策略目标就是限制跨域通信，实际中我们又需要跨域通信

什么是同源策略及限制

同源策略：限制从一个源加载的文档或者脚本如何与另一个源的资源进行交互 

这是一个用于隔离潜在恶意文件的关键的安全机制

源包括三部分内容：协议，域名，端口 //这三个有一个不一样 源就不一样 就是跨域了

什么是限制：不是一个源的文档 没有权利操作另一个源的文档

主要限制的方面

• Cookie，localstorage
• dom无法获得
• AJAX请求不能发送  //AJAX只适合同源通信

前后端如何通信

AJAX（同源策略）

WebSocket （不受同源策略限制）

CORS（支持跨域 也支持同源）

如何创建Ajax

XMLHttpRequest对象的工作流程 （高级浏览器，ie不行）

兼容性处理（问：是否忽略ie浏览器的处理）

事件触发的条件

事件的触发顺序

跨域通信的几种方式

1. JSONP

原理是什么？怎么实现？

在出现postMessage 和cors前  都用JSONP

JSONP    利用script标签异步加载

2. Hash ：url地址#后面   hash变动页面不会刷新 可以做快通信

         url地址？后面   search变动页面刷新  不能做快通信

//A 页面 iframe B 页面
//A中伪代码
$('iframe').src = $('iframe').src + '#' + 'data'

B中伪代码
window.onhashchange = function () {
}  //onhashchange  可以监测hash的变化 

 

3. postMessage （HTML5新特性）//api和事件

//A向B发送消息
//A页面中
window.postMessage(''data', 'Burl')
//B页面
window.addEventListener("message", function(e) {
event.data
e.source  Awindow
e.origin  AURl

})

 

4. WebSocket(不受同源限制)

var ws = new webSocket('url')
ws.onopen = function  发送消息
ws.onmessage =  function接受数据
ws.onclose =  function监听通道是否关闭

 

5. CORS（ajax变种）

fetch实现cors通信的
 fetch('url', {
method: 'get',
}).then()
.catch()

 

浏览器会拦截Ajax请求，如果这个Ajax请求是跨域的，会在HTTP请求头中加一个origin

res.header(Access-Control-Allow-Origin: <origin> | *)

 或者

res.set({
        "Access-Control-Allow-Origin": "*",
        'Access-Control-Allow-Methods': 'OPTIONS,HEAD,DELETE,GET,PUT,POST',
        'Access-Control-Allow-Headers': 'x-requested-with, accept, origin, content-type',
        'Access-Control-Max-Age':10000,
        'Access-Control-Allow-Credentials':true
    })

 

 

 

跨域适用场景

A网站登录后，在跳转到B网站时不需要再输入用户名密码

域名不同

协议不同

端口不同