浏览器上下文通信

浏览器上下文通信分为两种：同源和跨源。同样的同源通信也分为同一浏览器上下文和不同的浏览器上下文。

同源通信

同源通信方式多种多样，最常用的应该就是localStorage, sessionStorage，也有一个全局对象或者模块导出的对象，还有cookie, caches(cacheStorage)等，以及通过location对象，history.state, Event API, Messaging API, SharedWorker API等方式传递消息。

同源通信流程

通信流程大体分为两步：第一步是传递数据，第二步是通知目标。

同一浏览器上下文通信

第一步很容易，上面的方法都可以。但是第二步就有点不同的。有些方法提供了官方的事件监听，比如storage, hashchange, popstate等，但有些是没有这些原生事件的，那就需要一种方式通知。

很容易想到的就是自定义事件(CustomEvent)。

el.addEventListener('cookiechange', (e) => {console.log(e.detail);// ...
});const event = new CustomEvent('cookiechange', {detail: {getRandom(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}},bubbles: true, // 可以调用 stopPropagationcancelable: true, // 可以调用 preventDefault
});// 更新操作后通知对应元素或其子元素(要设置冒泡)
el.dispatchEvent(event);

除了这种方式，还有一种常见的就是发布订阅。

class PubSub {constructor() {this.subs = new Map() // 订阅者}// 订阅on(type, fn) {if (!this.subs.has(type)) {this.subs.set(type, new Set())}this.subs.get(type).add(fn)}// 发布emit(type, ...args) {if (this.subs.has(type)) {for (const fn of this.subs.get(type)) {fn(...args)}}}
}

最后一个就是window.postMessage，可以先监听message事件，然后在需要时通知。

window.addEventListener('message', (e) => {console.log(e);
});// 在需要时调用
window.postMessage({msg: '这是发给自己的消息',type: 'postMessage'},'*');

不同浏览器上下文通信

上面的方式都要求同一浏览器上下文，也就是处于同一个window下的文档，这属于内部通信。如果是不同的上下文，比如使用iframe或两个标签页，虽然是同源的但这样就无法通知到，这就需要跨浏览器上下文通信。

postMessage，Broadcast Channel API，Channel Messaging API， SharedWorker API都可以实现。
最简单的就是使用Broadcast和SharedWorker(需要浏览器支持)，其它两种更常用于跨域通信。可以点击上面的链接查看用法。

跨域通信

跨域通信也有很多类型，前端和前端跨域，前端和后端跨域，后端和后端跨域。后端和后端那就是纯后端的处理，和浏览器没什么关系了，除非使用了类似web socket这种长连接。

前端和前端跨域

想要实现两个跨域的前端页面通信，一方必须知道另一方的浏览器上下文或者消息句柄，也就是两个浏览器上下文必须要存在联系。比如使用<iframe>包含另一个上下文或者使用window.open打开另一个上下文。

需要注意的是，这两种方式都需要等待新的上下文加载完成之后才能通信的。所以<iframe>需要添加load事件监听，而window.open可以让对方先发送消息建立连接，类似TCP三次握手之后才正式发送消息。

// localhost:3000/a.html 向 localhost:4000/b.html 通信
// localhost:3000/a.html
const messageCallback = (e) => {if (e.origin === 'http://localhost:4000') {//接受返回数据console.log(e.data)}
}
let active = null;
const origin = 'http://localhost:4000';
frame.addEventListener('load', () => {window.addEventListener('message', messageCallback)active = frame.contentWindow;active.postMessage({type: 'init',msg: 'hello'},origin) //发送数据
})
frame.addEventListener('beforeunload', () => {window.removeEventListener('message', messageCallback)
})
// 发送消息函数
const postMsg = (payload) => {if (active && !active.closed) {active.postMessage(payload, origin);}
}// localhost:4000/b.html
let active = null;
let origin = '';
window.postMessage('message', (e) => {if (e.data && e.data.type === 'init') {active = e.source;origin = e.origin;return;}// 处理其它消息
});
const postMsg = (payload) => {// ...
}// 如果使用的是 window.open
let active = null;
let origin = '';
window.addEventListener('message', (e) => {// 处理初始化消息if (e.data === 'B_LOADED') {active = e.source;origin = e.origin;active.postMessage('A_ACCEPTED', origin);  // 第三步，完成之后可以正常通信了return;}// 处理其它消息
})
xxx.addEventListener('click', () => {// 默认创建标签页，如果传递第三个参数或`target: '_blank'`会创建新的窗口window.open('http://localhost:4000/b.html', 'b')  // 第一步// 这里创建之后可能页面还没加载完成，所以调用 postMessage 可能没有响应。// 要么使用定时器不断轮询，要么等待对方加载完成之后再建立连接。
})
const postMsg = (payload) => {// ...
}// localhost:4000/b.html
let active = null;
let origin = 'http://localhost:3000';
window.addEventListener('message', (e) => {if (e.data && e.data === 'A_ACCEPTED') {// 建立连接成功return;}// 处理其它消息
})
const postMsg = (payload) => {// ...
}
if (window.opener && !window.opener.closed) {active = window.opener;postMsg('B_LOADED'); // 第二步
}

这里使用的一般是上面的postMessage和Channel Messaging API，可以点击上面的链接查看使用示例。

前端和后端跨域

前后端跨域是非常常见的，通用的解决方案一般使用使用JSONP和new Image需要使用callback作为参数的查询字符串，缺点就是只能发起GET请求。

另一种需要满足CORS的请求规范，也就是前后端同时遵守一套跨域规则，满足之后就允许跨域请求了。

一些普通的GET请求可以直接请求，但其它方法的请求需要先发起预检请求约定一些规则。

// server.js
import express from 'express'
const app = express()const whiteList = ['http://localhost:3000'] //设置白名单
// 设置跨域插件
app.use(function (req, res, next) {const origin = req.headers.originif (whiteList.includes(origin)) {// 设置哪个源可以访问我res.setHeader('Access-Control-Allow-Origin', origin)// 允许携带哪个头访问我res.setHeader('Access-Control-Allow-Headers', 'Access-Token')// 允许哪个方法访问我res.setHeader('Access-Control-Allow-Methods', 'POST,PUT,DELETE')// 允许携带cookieres.setHeader('Access-Control-Allow-Credentials', true)// 预检的存活时间res.setHeader('Access-Control-Max-Age', 24 * 60 * 60 * 1000)// 允许返回的头res.setHeader('Access-Control-Expose-Headers', 'latest-version')}next()
})
app.put('/getData', function (req, res) {console.log(req.headers)res.setHeader('latest-version', '3.2.1') // 返回一个响应头res.end('over');
})
app.listen(4000);

这个后端要求跨域请求的源必须是白名单里的，同时规定了请求需要使用的方法，跨域请求需要传递的请求头以及一些其它配置。只要用户满足请求方法和请求头的要求就可以请求http://localhost:4000/getData，这个方法设置了响应头latest-version和响应数据over。

前端需要根据需求发起跨域请求。

// XMLHttpRequest
const xhr = new XMLHttpRequest()
xhr.withCredentials = true // 前端设置是否带cookie
xhr.open('PUT', 'http://localhost:4000/getData', true)
xhr.setRequestHeader('Access-Token', '123456')
xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {//得到响应头console.log(xhr.getResponseHeader('latest-version')) // 3.2.1console.log(xhr.response) // over}}
}
xhr.send();// fetch
fetch('http://localhost:4000/getData', {mode: 'cors', // 跨域credentials: 'include', // 携带cookieheaders: {'Access-Token': '123456' // 这个自定义请求头是后台要求的},method: 'PUT' // 请求方式
}).then((res) => {for (const [key, value] of res.headers.entries()) {if (key === 'latest-version') {console.log(value) // 3.2.1}}return res.text()}).then((data) => {console.log(data) // over})

这样前端和后端的跨域请求就完成了，只要过期时间没到，再次跨域请求就不需要发起预检请求了。