跨域限制的演进历史

SOP 时代：
同源策略，AJAX 请求，例如使用 XHR 对象发起的请求，不允许访问跨域资源。
解决办法：
方法一：
img 标签。
原理：img src 访问地址本身允许跨域
缺点：只能发送 get 请求；不能读取响应内容，只能监听 onload 和 onerror 事件
适用场景：广告追踪；信息上报；请求探测

方法二：
使用 JSONP。
原理：script 标签引用的资源本身就允许跨域
缺点：也是只能发送 get 请求；发起就不能取消；对请求参数的大小有限制；

CORS 机制：
诞生背景：是一种更为宽松的 SOP 策略；
特点：需要服务端配合
过程：分为简单和非简单请求；非简单请求需要预检
协议：需要服务端响应带有 Access-Control-Allow-Origin 的响应头值匹配当前源；如果要带凭据请求（cookie/http 认证头/ssl证书），则需要请求和响应有对应参数和响应头；

WebSocket 协议：
特点：本身就允许跨域，因为 SOP 只适应于 HTTP/HTTPS 协议，不适用于 websocket。CORS 则只对响应有作用
过程：先建立 HTTP 连接，然后通过 Upgrade 请求头升级为 WS 协议
如何防范：建立 HTTP 连接时，服务器就要校验源信息；后续的双工通讯时也要做认证

参考资料：
https://dev.to/pssingh21/websockets-bypassing-sop-cors-5ajm