什么是同源策略及限制
同源:如果两个 URL 的协议、域名和端口都相同,我们就称这两个 URL 同源。
同源策略:浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的。两个不同的源之间若要相互访问资源或者操作 DOM,那么会有一套基础的安全策略的制约,我们把这称为同源策略。
具体来讲,同源策略主要表现在以下三个层面(DOM、Web 数据和网络)。
- DOM 无法获得
- Cookie、LocalStorage 和 IndexDB 无法读取
- AJAX 请求无法发送
跨域通信的几种方式
JSONP
-
JSONP 是什么
JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明才智开发出来,只支持 get 请求。
-
JSONP 怎么工作的(原理)
在网页有一些标签天生具有跨域能力,比如:script、img、link、iframe
-
JSONP 的使用
- 创建一个 script 标签
- 设置 script 标签的 src 属性,设置好 callbackName
- 把标签插入到页面中
- 加载完毕,去除标签
function jsonp ({url, data, success}) { // 创建一个script标签 const script = document.createElement('script'); // 拼接params参数 var params = ''; for (let attr in data) { params += `&${attr}=${data[attr]}`; } // 把success函数存放到全局 let callbackName = `callbackName${Math.random().toString().replace('.', '')}`; console.log(callbackName); window[callbackName] = success; // 设置script标签src属性 script.src = `${url}?callback=${callbackName}${params}` // 把标签添加到body中 document.body.appendChild(script); // 成功加载后去除script标签 script.onload = function () { document.body.removeChild(script); } }
CORS
-
CORS 是什么
CORS(Cross-Origin Resourse Sharing),跨域资源共享。CORS 是官方的跨域解决方案。它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求,跨域资源共享标准新增了一组 HTTP 头字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源,
-
CORS 怎么工作的(原理)
CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应报文后就会放行。
-
CORS 的使用
主要是服务器端的设置
response.setHeader("Access-Control-Allow-Origin", "*")
Hash
-
hash 是什么
hash:url 中 # 及其后面的字符串就叫 hash
-
hash 怎么工作的(原理)
在容器页面 A 页面中改变嵌入页 B 的 url 中的 hash 值,B 不会刷新,但是 B 可以用过
window.onhashchange
事件监听到 hash 变化 -
hash 的使用
使用场景:在页面 A 下提供 iframe 或 frame 嵌入了跨域的页面 B
// 在 A 中伪代码如下 var B = document.getElementsByTagName('iframe'); B.src = B.src + '#' + 'data'; // 在 B 中的伪代码如下 window.onhashchange = function () { var data = window.location.hash; }
postMessage
-
postMessage 是什么
window.postMessage() 是HTML5 新增的用来跨域的解决方案。
-
postMessage 的使用
直接从 A 窗口获得 B 窗口的引用,并分发一个 message;
B 窗口添加一个 message 事件监听即可
// 窗口 A(http: A.com) 同跨域的窗口 B(http: B.com)发送信息 window.postMessage('data', 'http: //B.com'); // window 是指 B 窗口 // 在窗口 B 中监听 window.addEventListener('message', function(event) { console.log(event.origin); // http: //A.com console.log(event.source); // A 窗口 console.log(event.data); // data! }, false);
WebSockets
-
WebSockets 是什么
WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。
-
WebSockets 的使用
var ws = new WebSocket("wss://echo.websoket.org"); //这个是后端端口 ws.onopen = function (evt) { ws.send("some message"); }; ws.onmessage = function (evt) { console.log(evt.data); }; ws.onclose = function (evt) { console.log("连接关闭"); };