HTML5
发布时间:2019-10-08 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html5 postMessage前端跨域并前端监听的方法示例,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
有时候会遇到傻X需求,比如前端单点登陆!遇到需求,就要去想解决办法,
这里我给大家做一个简单的前端单点登陆的解决方案,
用到的就是post
message跨域信息传输以及onstorage的监听。
本文用到的知识点 koa架设静态资源服务、跨域、post
message的用法、onstorage监听storage
第一步、架设两个不同端口的服务
我们这里用koa2来搭建两个服务到不同的端口,来模拟一下真正的工作中需要出现的跨域情况。
非常的简单 主要用到 koa-static这个中间件
搭建起来也是非常容易的,如果大家想学node相关的知识 可以加我微信shouzi_1994 或者在博客下面留言
你的联系方式 这里就不多说废话了 直接上代码 视频内会有详细的搭建步骤
// localhost
:4000
const Koa =
require('koa'
);
const path =
require('path')
const static =
require('koa-static')
const app = new Koa(
);
//设置静态资源的路径
const staticPath = './static'
app.use(static(
path.join( __dirname,staticPath)
))
console.log("服务启动在4000端口")
app.listen(4000
);
// localhost:3000
const Koa =
require('koa'
);
const path =
require('path')
const static =
require('koa-static')
const app = new Koa(
);
//设置静态资源的路径
const staticPath = './static'
app.use(static(
path.join( __dirname,staticPath)
))
console.log("服务启动在4000端口")
app.listen(4000
);
大佬总结
以上是大佬教程为你收集整理的html5 postMessage前端跨域并前端监听的方法示例全部内容,希望文章能够帮你解决html5 postMessage前端跨域并前端监听的方法示例所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。