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

lvbirui
3,669 阅读2分钟

发布时间：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…

avatar
文章
阅读
粉丝