news 2026/5/19 8:50:34

Electron 网络与外部通信

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Electron 网络与外部通信

Electron 中的网络与外部通信

Electron 应用可以轻松进行外部网络通信(如 HTTP/HTTPS 请求、WebSocket),得益于 Chromium 的网络栈和 Node.js 的集成。主进程(main process)和渲染进程(renderer process)都有多种方式访问网络,但出于安全考虑,推荐在主进程中处理敏感请求。

1.HTTP/HTTPS 请求方式

Electron 提供多种 API 和库进行网络请求,选择取决于进程位置和需求。

方式适用进程描述与优点缺点/注意事项示例库/模块
标准 fetch()渲染进程浏览器原生 API,简单易用,支持 CORS。受浏览器安全限制(如 CORS),不处理代理完美。直接使用fetch
Electron net 模块主进程(推荐)使用 Chromium 网络栈,支持代理、认证、隧道等。Node.js 风格(ClientRequest)或现代 fetch。require('electron').net
net.fetch()主进程/会话Electron 25+ 新增,类似浏览器 fetch,但用 Chromium 栈。更现代、Promise-based。net.fetch(url)
Node.js http/https主进程纯 Node.js 实现。代理支持较差。require('http')
第三方库两者如 axios、node-fetch。额外依赖;node-fetch 用 Node 栈。axios,node-fetch
electron-fetch主进程fetch API 兼容,但用 Electron net 后端。代理支持更好。npm i electron-fetch
  • 推荐实践

    • 渲染进程:直接用fetch()axios,适合公开 API(无密钥)。
    • 主进程:用net模块或net.fetch()处理含密钥/敏感请求,避免暴露到渲染进程。
    • 通过 IPC(进程间通信)桥接:渲染进程发送请求指令,主进程执行并返回结果。
  • net 模块示例(主进程)

    const{net}=require('electron');// 传统 ClientRequest 风格constrequest=net.request('https://api.example.com/data');request.on('response',(response)=>{response.on('data',(chunk)=>{console.log(`BODY:${chunk}`);});response.on('end',()=>{console.log('No more data');});});request.end();// 现代 net.fetch()(Electron 25+)asyncfunctionfetchData(){constresponse=awaitnet.fetch('https://api.example.com/data');if(response.ok){constdata=awaitresponse.json();console.log(data);}}
  • session 管理
    使用session模块自定义会话(cookies、代理、缓存)。

    const{session}=require('electron');constses=session.fromPartition('persist:myapp');constresponse=awaitses.fetch('https://example.com');// 从自定义 session 请求
2.WebSocket 通信
  • 渲染进程:直接用浏览器原生WebSocket对象。
    constws=newWebSocket('wss://example.com/socket');ws.onmessage=(event)=>console.log(event.data);
  • 主进程:用 Node.js 库如wssocket.io,适合后台长连接(如实时通知)。
  • 与外部服务器通信:两者均可,渲染进程更简单,主进程更适合隐藏密钥。
3.进程间通信(IPC)与网络结合

网络请求常结合 IPC 使用,确保安全:

  • 渲染进程不直接暴露 Node.js 或密钥。
  • 使用ipcMainipcRenderer
    // preload.js(安全暴露)const{contextBridge,ipcRenderer}=require('electron');contextBridge.exposeInMainWorld('api',{fetchData:(url)=>ipcRenderer.invoke('fetch-data',url)});// 主进程const{ipcMain,net}=require('electron');ipcMain.handle('fetch-data',async(event,url)=>{constresponse=awaitnet.fetch(url);returnawaitresponse.json();});// 渲染进程window.api.fetchData('https://api.example.com').then(data=>console.log(data));
4.安全性与最佳实践
  • 上下文隔离:启用contextIsolation: true,通过 preload 脚本暴露有限 API。
  • CORS 处理:渲染进程 fetch 受 CORS 限制;主进程 net 不受影响。
  • 代理支持:net 模块自动处理系统代理、认证(basic/digest/NTLM)。
  • 证书与 HTTPS:用app.on('certificate-error')处理自签名证书。
  • 性能:大文件上传用 chunked encoding;避免在渲染进程阻塞 UI。
  • 调试:用netLog模块记录网络日志。
  • 打包注意:第三方库需确保兼容 ASAR。

这些方式让 Electron 应用能安全高效地与外部 API、服务器通信。如果需要特定场景(如 OAuth、上传文件)示例,请提供更多细节!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/16 15:03:01

查重不过?AI痕迹太重?百考通降重平台,双效合一,轻松过关!

论文写完了,却卡在查重这一关? 重复率高达35%,导师还指出“语言像AI生成”? 手动改写几遍仍无济于事,眼看提交 deadline 逼近…… 别再浪费时间无效修改了!百考通智能降重与去AI痕迹平台(https…

作者头像 李华
网站建设 2026/5/9 18:00:31

人机协作:软件测试的下一站革命

当人类智慧遇见机器效率 在软件测试领域,人工测试与自动化测试的二分法正逐渐被“人机协作”的新范式取代。这不是简单的工具辅助,而是人类专业判断与机器精准执行的深度融合。随着人工智能和机器学习技术的成熟,测试人员不再被重复性任务束…

作者头像 李华
网站建设 2026/5/12 13:08:30

软件测试的认知升维:从缺陷探测到质量共建

01 范式转移:三次测试浪潮的技术哲学 软件测试行业正经历第三次认知飞跃。第一次浪潮以手工测试为主导,测试被视为开发的后续环节,缺陷检测是核心目标。第二次浪潮诞生了自动化测试框架,Selenium、Appium等工具将重复性任务交给机…

作者头像 李华
网站建设 2026/5/11 16:03:39

基于springboot + vue公司员工管理系统(源码+数据库+文档)

公司员工管理 目录 基于springboot vue公司员工管理系统 一、前言 二、系统功能演示 三、技术选型 四、其他项目参考 五、代码参考 六、测试参考 七、最新计算机毕设选题推荐 八、源码获取: 基于springboot vue公司员工管理系统 一、前言 博主介绍&…

作者头像 李华
网站建设 2026/5/11 11:23:05

为什么顶尖团队都在用Open-AutoGLM处理多弹窗?真相令人震惊!

第一章:为什么顶尖团队都在用Open-AutoGLM处理多弹窗?在现代Web自动化测试与爬虫工程中,多层级弹窗(如登录模态框、权限提示、广告浮层)已成为阻碍流程稳定性的主要瓶颈。传统自动化工具常因无法准确识别动态弹窗的上下…

作者头像 李华
网站建设 2026/5/12 11:58:07

Open-AutoGLM全局异常监听配置全攻略(避免线上事故的最后防线)

第一章:Open-AutoGLM全局异常监听配置全攻略(避免线上事故的最后防线)在高可用系统架构中,Open-AutoGLM 的全局异常监听机制是保障服务稳定性的关键组件。通过实时捕获模型推理链路中的异常行为,可快速定位并阻断潜在故…

作者头像 李华