我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

electron的跨域问题,也喋喋不休的讨论了好久好久了。那么electron处理跨域问题的最简易方案是什么呢?那就是webSecurity。但是electron官方却是不建议大家使用webSecurity的,因为这会给electron软件带来一系列的安全性问题。那么,作为electron开发者的各位小伙伴,该如何选择呢?

苏南大叔:electron如何跨域?electron 跨域方案之禁用 webSecurity - electron-cors
electron如何跨域?electron 跨域方案之禁用 webSecurity(图3-1)

整体上来说,本文跨域方案的核心就是:webSecurity这个参数,可以一键解决跨域相关的一系列问题。but!这个方案就是个临时的掩耳盗铃的方案。这一点苏南大叔就先说明在这里!大家自行决定,是否使用这个非常简单,但是又不安全的方案。

本文测试环境:win/electron@3.1.4

electron窗体跨域方案

mainWindow = new BrowserWindow({
    //...
    webPreferences: {
      webSecurity: false,
      //...
    },
});

设置webPreferences中的webSecurityfalse,就禁用掉了浏览器的跨域安全特性(同源策略)了。

苏南大叔:electron如何跨域?electron 跨域方案之禁用 webSecurity - websecurity
electron如何跨域?electron 跨域方案之禁用 webSecurity(图3-2)

webview窗体跨域方案

对于webview来说,需要添加的属性是disablewebsecurity。范例如下:

<webview src="https://www.github.com/" disablewebsecurity></webview>

警告信息

禁用websecurity之后,在console中,其实有相关的warning信息的。指向的页面中,系统说明了electron中有关安全的相关注意事项。这些内容,还是挺刷新三观的:

警告信息如下:

\node_modules\electron\dist\resources\electron.asar\renderer\security-warnings.js:166 Electron Security Warning (Disabled webSecurity) This renderer process has "webSecurity" disabled. This exposes users of this app to severe security risks.
 
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
 This warning will not show up
once the app is packaged.

苏南大叔:electron如何跨域?electron 跨域方案之禁用 webSecurity - electron-cors-warning
electron如何跨域?electron 跨域方案之禁用 webSecurity(图3-3)

这些警告信息也表明了electron方面,对这个禁用webSecurity方案的担忧和焦虑。为什么这个非常简单的方案并不会被推荐,其原因就在这里了。

相关链接

那么,安全的cors方案是什么呢?这里有一些不设置webSecurity的跨域方案,您可以试试看。不过,当你看到有些方案里,还要设置服务器端配置之后,您也许就会退缩回到本文所描述的方案了。哈哈~

结束语

苏南大叔的electron相关经验文章汇总链接地址:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   electron