Iframe 在electron-vue 当中遇到的跨域问题

Iframe 在electron-vue 当中遇到的跨域问题

技术杂谈小彩虹2021-07-19 13:07:0780A+A-

发布时间:2021-01-25

项目背景

项目旨在把noVNC集成到一个electron-vue 为基础的桌面APP中。

mile stone 1: 将noVNC 集成到VUE

最开始我希望把noVNC项目当中的一些dom元素和js方法从noVNC项目当中抽出来,根据需要嵌入到我的项目当中去,但是发现,原noVNC项目已经非常完善,单独抽出来集成到我的项目当中去我就需要去读noVNC项目的源码,虽然也可能不复杂,但是如果有更简单的方法,为什么不直接使用呢?于是,我决定采用iframe 标签,直接将noVNC项目整个的引用到我的项目中来。

mile stone 2: 放弃将原生的noVNC 集成到项目中,改用iframe 嵌入

用electron-vue 搭建好项目后,将noVNC 项目源码直接放在 项目根目录下的static 目录下,然后直接在ifram 引用,例如

<iframe src='../../static/noVNC/vuc.html'></iframe>

这样做,开发环境没问题,但是打包后就有问题。
原因是打包后,在static 下的静态文件就无法正常进行访问了,因为webpack 打包时,默认会把静态文件打包到 asar 的压缩文件下,在这个打包的结果中,静态文件是只读的。
我第一时间做的是,取消在打包过程中的asar压缩。

在 package.json中的build里添加"asar":false 就可以阻止打包的时候对static文件进行压缩:
"build": {
        "asar": false,
    },

这样修改后依然无效,那么就放弃将noVNC项目打包到electron 当中。

mile stone 3:通过ngnix 服务在本地运行noVNC,然后通过跨域引用,让iframe 引入noVNC项目

在/src/main/index.js 中做如下修改:

//添加 webSecurity: false
 mainWindow = new BrowserWindow({
        webPreferences: { 
            webSecurity: false
        },
        height: 563,
        useContentSize: true,
        width: 1000
    })

在iframe 标签中添加如下属性:

//添加  allow-scripts 与  allow-same-origin 属性
 <iframe src="http://127.0.0.1:80/vnc.html" frameborder="0"   sandbox='allow-scripts allow-same-origin '></iframe>

我之前有文章介绍过如何用nginx 启动noVNC webserver 服务,juejin.cn/post/691567…

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们