常见跨域解决办法----CORSpostMessage

Posted 2021-09-09 茴香

CORS

CORS 需要浏览器和后端同时支持。IE8和9需要通过XDomainRequest实现。
浏览器会自动进行CORS通信，实现CORS通信的关键是后端，只要后端实现了CORS，就实现了跨域。

实现方式

• 服务端设置Access-Control-Allow-Origin,该属性表示哪些域名可以访问资源，如果设置通配符*,则表示所有网站都可以访问资源。

postMessage

window.postMessage() 方法可以安全地实现跨源通信，可实现跨文本档、多窗口、跨域消息传递。

使用场景

• 页面和其他打开的新窗口的数据传递
• 多窗口之间消息传递
• 页面与嵌套的iframe消息传递

参数介绍（官网文档：https://developer.mozilla.org...

otherWindow.postMessage(message, targetOrigin, [transfer]);

• message: 将要发送到其他window的数据
• targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息，可设置为url或通配符*。发送消息时，如果目标窗口的协议、主机地址、端口号三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送，只有三者完全匹配，消息才会被发送
• transfer:该参数可选，是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。