Electron集成Express后端接收表单请求报错net::ERR_FILE_NOT_FOUND求助

核心问题 #

你的表单提交目标路径未指定完整HTTP协议地址，Electron前端默认以file://协议加载本地页面，直接写/addcustomerpost会被解析为本地文件路径（如C:/addcustomerpost），而非请求Express服务器接口。

具体修复步骤 #

1. 确认Express服务器正常启动 #

先保证main.js中的Express服务已正确监听端口，示例代码：

const express = require('express');
const app = express();
const port = 3000;

// 解析表单数据
app.use(express.urlencoded({ extended: true }));

// 处理POST请求
app.post('/addcustomerpost', (req, res) => {
  console.log('收到表单数据:', req.body);
  res.send('提交成功');
});

// 启动服务器
app.listen(port, () => {
  console.log(`Express服务运行在 http://localhost:${port}`);
});

2. 修改前端表单的action属性 #

将表单action设置为完整的HTTP接口地址，示例：

<form action="http://localhost:3000/addcustomerpost" method="POST">
  <input type="text" name="customerName" placeholder="客户名称">
  <button type="submit">提交</button>
</form>

3. 处理跨域问题（若出现） #

若提交时触发跨域错误，可在Express中添加CORS配置：

// 方式1：使用cors包
const cors = require('cors');
app.use(cors());

// 方式2：手动设置响应头
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

4. 可选：改用Electron IPC通信替代HTTP请求 #

如果不想依赖HTTP服务器，可直接用Electron的进程间通信处理表单：

• 渲染进程（前端）代码：

const { ipcRenderer } = require('electron');
const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = Object.fromEntries(new FormData(form));
  ipcRenderer.send('submit-customer', formData);
});

// 接收主进程的处理结果
ipcRenderer.on('submit-result', (event, message) => {
  alert(message);
});

• 主进程（main.js）代码：

const { ipcMain } = require('electron');

ipcMain.on('submit-customer', (event, data) => {
  // 这里直接处理表单数据，无需HTTP请求
  console.log('客户数据:', data);
  event.reply('submit-result', '客户信息已保存');
});

内容的提问来源于stack exchange，提问作者MrB