Failed to execute ‘postMessage‘ on ‘DOMWindow‘: The target origin provided (‘http://localhost:50_failed to execute 'postmessage' on 'domwindow': th

报错: Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘http://localhost:5001’) does not match the recipient window’s origin (‘http://localhost:5000’).

problem

本地2个服务 localhost:5000 localhost:5001，其中5001页面作为iframe嵌入到5000页面中
5000服务可以展示5001的页面，但是2个服务无法通过postmessage进行通信，控制台报错:
报错: Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:5001') does not match the recipient window's origin ('http://localhost:5000').

reason

跨域导致

solution

通过nginx转发，使其2个服务同源，然后通过路由前缀区分
同源之后，2个服务postmessage可以正常通信

附上nginx配置

server {
    listen       9999;
    server_name  localhost;
    # http://localhost:9999/parent/
    location /parent {
        proxy_pass http://localhost:5000/;
    }
    # http://localhost:9999/child/
    location /child {
        proxy_pass http://localhost:5001/;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

效果