前端跨域-postMessage跨域

最新推荐文章于 2024-08-24 18:58:59 发布

前端黑翼

最新推荐文章于 2024-08-24 18:58:59 发布

阅读量384

点赞数

文章标签： javascript html5 es6 reactjs node.js

本文链接：https://blog.csdn.net/qq_41801117/article/details/118229712

版权

postMessage跨域：属于一种以前用的跨域手段，其是结合iframe标签来使用。
具体实现
我们需要准备2个html文件

A.html

<iframe id="ifr" src="http://localhost:5001/public/B.html" style="display: none;" frameborder="0"></iframe>
    <script>
        var ifr = document.getElementById('ifr')
        ifr.onload = function () {
            ifr.contentWindow.postMessage('hah','*')
        }
    </script>

B.html
<body>
    <script>
        window.onmessage = function(e){
            console.log(e.data);
        }
    </script>
</body>

准备2个端口来实现跨域。其中，通过5000端口来访问A.html，利用5001端口来访问B.html。

ASev
const express = require('express')
const app = express()
app.use(express.static('./'))
app.listen(5000,()=>{
    console.log('服务器启动了');
})

-----------------------------
BSev
const express = require('express')
const app = express()
app.use(express.static('./'))
app.listen(5001,()=>{
    console.log('服务器启动了');
})