【9大跨域解决方案】postMessage解决跨域的原理

postMessage()

这是H5引入的一个API，可以实现跨文档、多窗口、跨域消息的传递。

postMessage(data,origin)方法

• data:要传递的数据
• origin:字符串参数，只目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写
• 如果要传递给所有窗口，值可以为"*"
• 如果传给当前窗口同源的话，值可以为"/"

message

当使用postMessage传递数据的时候，目标源可以使用message方法来接受传递过来的数据

message方法

 window.addEventListener('message',function(e){
  console.log(e.data);
 })

• 该方法的参数e中有几个属性必须了解：

1. e.data 指的是传递过来的数据
2. e.origin 指的是发射源的域

实战举例

向同源发射信息(非跨域)

 window.postMessage('nihao','/'); 
 window.onmessage = function(e){
  console.log(e.origin);//当前源的域
  console.log(e.data);//传递过来的数据'nihao'
 }

跨域发送信息

1. 先起两个服务，a.html起在localhost:3000上，b.html起在localhost:4000上

//a.html

 
 


//b.html

 aaa
 

---

实现跨域的9种方法(点击可跳转详情页面)

• jsonp
• cors
• postMessage
• document.domain
• window.name
• location.hash
• http-proxy 后续会有详细文章阐述
• nginx 后续会有详细版块阐述
• websocket