同源策略、跨域通信
栏目: JavaScript · 发布时间: 5年前
http/https
-
Cookie
、localStorage
、indexDB
等无法读取。 -
无法获取操作
DOM
。 -
AJAX
请求不能发送。
3、前后端通信
Ajax WebScoket CORS
4、如何创建Ajax
XMLHttpRequest
关键代码: // 1. 第一步,申明xhr对象,考虑ie的兼容性。 var xhr = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveObject('Microsoft.XMLHTTP'); // 2. 确定请求的方式,get/post等, get参数拼接在url中。 xhr.open(method, url, true) // 3. 发送数据 3. xhr.send() / xhr.send(data) // 判断http的状态 4. xhr.onload = function() { // 判断xhr.status if(xhr.status === 200 || xhr.status === 304 || xhr.status === 206) { // 304,服务器判断本地有缓存 // 206,请求媒体资源可能返回资源的一部分 } else {} } 复制代码
5、跨域通信的几种方式
- JSONP
// 原理:利用script标签的异步加载来实现。就像在head头中加载script标签一样。 // jsonp,和后台约定的回调函数名 var jsonp = function() { // 创建script标签 var script = document.createElement('script'); // 给script添加属性,如src,在src中约定callback函数。 script.src = 'http:/www.test.com/?name=zhangsan&callback=jsonp' // script加载完的回调 script.onload = function() {} // script加载失败的回调 script.onerror = function() {} // 将script添加到head标签中 document.getElementsByTagName('head')[0].appendChild(script); } 复制代码
- Hash
// 原理:Hash改变页面不会刷新,search的改变会刷新页面 // 在A中,代码如下 var objB = document.getElementsByTagName('iframe')[0]; objB.src = objB.src + '#' + 'data'; // 在B中,监听hash的变化 window.onhashchange = function() { var data = window.location.hash // 拿到是#后面所有的内容 }; 复制代码
- postMessage
// 如A源向B源发送数据data // A, 参数含义:发送的数据,接受方的源或者"*" window.postMessage('data', 'http/B.com'); // B: 监听message,判断消息来源,接受数据 window.addEventListerr('message', function(event) { console.log(event); // event.origin // 消息来源,'http/A.com' // event.source // A的引用window // event.data // 接受的数据 }, false) 复制代码
- WebSocket
// 1. 申明 var ws = new WebSocket('wss://....'); // wss/ws => 加密/不加密 // 2. 建立链接 ws.onopen = function(e) { console.log('开始连接...'); ws.send('hello WebSocket!'); } // 3. 接受消息 ws.onmessage = function(e) { console.log('接收数据:'+ e.data); ws.close() // 关闭连接 } // 4. 关闭连接的回调,确定以关闭连接 ws.onclose= function(e) { console.log('连接关闭'); } 复制代码
- CORS
// 可以简单的理解为支持跨域通信的Ajax // 原理:浏览器会拦截ajax请求,如果发现是跨域请求,则会在请求头中加一个origin // 需要用到es6的fetch API fetch('/api/uri', { // 在这里配置跨域参数 method: 'get', params: {} }).then(res => { // 成功的回调 }).catch(error => { // 失败的回调 }) 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 同源策略详解
- 同源策略和跨域访问
- AJAX 及 同源策略/ CORS跨域
- 同源策略与JS跨域(JSONP , CORS)
- 浏览器同源策略,及跨域解决方案
- 挖洞经验 | 用浏览器缓存绕过同源策略(SOP)限制
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。