Electron中ipcRenderer发送的数据无法被ipcMain接收该如何处理

问题核心原因 #

1. Electron 12及以上版本默认开启上下文隔离、关闭渲染进程Node集成，你在index.js中直接调用require('electron')会触发未定义错误，ipcRenderer发送逻辑实际没有执行。你可以在渲染进程按F12打开控制台查看报错信息验证这一点。
2. 你使用的按钮是type="submit"类型，如果外层包裹了form表单，点击会触发默认表单提交行为导致页面刷新，中断IPC消息发送。

你原有main.js中的ipcMain监听逻辑没有问题，无需修改，按照以下步骤修复即可：

推荐方案（符合Electron安全规范，无需关闭安全限制） #

• 第一步：修改main.js中BrowserWindow创建的配置，新增preload脚本声明：

const { app, BrowserWindow , ipcMain, path } = require('electron')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 新增preload脚本配置，指向同目录下的preload.js
      preload: path.join(__dirname, 'preload.js'),
      // contextIsolation、nodeIntegration保留默认值即可，无需手动修改
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()
})

// 原有ipcMain监听保留
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log( arg );
});

• 第二步：在项目根目录新建preload.js文件，通过contextBridge把IPC通信方法暴露给渲染进程：

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  sendLoginUsername: (username) => ipcRenderer.send('asynchronous-message', username)
})

• 第三步：修改index.js代码，移除require逻辑，同时阻止按钮默认提交行为：

document.querySelector("#loginButton").addEventListener('click', function(e){
  // 阻止submit按钮默认的表单提交、页面刷新行为
  e.preventDefault()
  userDetails = document.getElementById('login');
  username = userDetails.username.value;
  password = userDetails.password.value;
  console.log("Hello");
  // 调用preload暴露的方法发送消息
  window.electronAPI.sendLoginUsername(username);
})

简易兼容方案（仅适合本地自用小工具，有安全风险） #

如果是个人开发的小工具不需要考虑安全问题，可以直接修改BrowserWindow配置关闭安全限制，无需新增preload文件：

// main.js中BrowserWindow的webPreferences配置修改为
webPreferences: {
  nodeIntegration: true,
  contextIsolation: false,
}

之后只需在index.js的点击监听回调第一行添加e.preventDefault()阻止默认提交行为即可，原有逻辑不用改动。

内容的提问来源于stack exchange，提问作者Divyesh P K