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相关经验文章汇总链接地址:

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

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章:

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!