通信类知识

javaScript

前后端通信方式

①、什么是同源策略及限制

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互,这是一个用于隔离潜在恶意文件关键的安全机制。

源:主要包含协议、端口、域名

限制:
1)、Cookie、LocalStorage、indexDB无法读取
2)、DOM无法获得
3)、AJAX请求不能发生

②、前后端通信方式

1)、Ajax: (同源策略限制)。
2)、WebSocket: (不受同源策略限制)。
3)、CORS: (支持跨源通信也支持同源通信),IE浏览器不能低于IE10。

③、如何创建Ajax

注意点:
1)、XMLHttpRequest对象的工作流程
2)、兼容性处理
3)、事件的触发条件
4)、事件的触发顺序

④、跨域通信的几种方式

1)、JSONP
2)、CORS
3)、nginx反向代理
4)、node代理
5)、WebSocket
6)、postMessage
7)、FLASH(高级浏览器淘汰)
8)、window.name(ie6,ie7需要写兼容方案)
9)、HASH(适用页面A通过iframe或frame嵌入了跨域页面B)

⑤、CORS与JSONP对比
  1. JSONP对于浏览器支持较好,虽然目前浏览器支持CORS,但是IE10以下不支持CORS。
  2. JSONP只能用于获取资源,CORS支持所有类型的HTTP请求
  3. JSONP的错误处理机制并不完善,我们没办法进行错误处理;而CORS可以通过onerror事件监听错误,并且浏览器控制台会看到报错信息。
  4. JSONP只会发一次请求,而CORS会发两次请求
  5. 安全性:CORS在资源访问授权方面进行了限制(Access-Control-Allow),标准浏览器都做了安全限制,比如拒绝手动设置origin字段,相对于安全一点。

推荐文章