前端通信基础

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

(1)同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
这个是一个用于隔离潜在恶意文件的关键的安全机制。
源:协议、域名、端口
(2)Cookie、localStorage 和indexDB无法读取。
(3)DOM无法获得。
(4)ajax请求不能发送

2、前后端如何通信

ajax(同源)
websocket
cors

3、如何创建ajax
var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHttp);
xhr.open(type, url, true);
xhr.sendRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send();

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

4、跨域通信的几种方式

(1)jsonp
script标签的异步加载
原理:视频#3-13的第20分钟
(2)hash
hash改变,页面是不刷新的
search改变,页面是会刷新的
window.onhashchange 得到window.location.hash
(3)postMessage

Bwindow.postMessage('data', 'http://B.com');
windwo.addEventListener('message', function(event) {
    console.log(event.origion); // http://A.com
    console.log(event.source); // Awindow
    console.log(event.data); // data
})

(4)websocket

var ws = new WebSocket('wss://echo.websocket.org');
ws.open, ws.onmessage, ws.onclose

(5)cors
①cors会在http请求中添加origin的请求头
②ajax不支持跨域,cors是变种的ajax
③同源下,fetch就是ajax

fetch('/some/url', {
    method: 'get'
}).then(function(response) {

}).catch(function(err) {})

④参考资料:http://www.ruanyifeng.com/blog/2016/04/cors.html

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    Yaoxue9阅读 5,161评论 0 6
  • 前端开发中,跨域使我们经常遇到的一个问题,也是面试中经常被问到的一些问题,所以,这里,我们做个总结。小小问题,不足...
    Nealyang阅读 3,359评论 0 0
  •   2005 年,Jesse James Garrett 发表了一篇在线文章,题为“Ajax: A new App...
    霜天晓阅读 4,392评论 0 1
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    他方l阅读 4,729评论 0 2
  • 什么是跨域 跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实...
    HeroXin阅读 4,375评论 0 4

友情链接更多精彩内容