Electron中向API URL传参数遇404错误，如何修复？

你的404错误核心原因是Express服务器未正确配置路由，也未启动监听。虽然你引入了Express，但既没定义/api/data2的处理逻辑，也没让服务器在3000端口运行，导致axios请求的端点不存在。以下是具体修复步骤：

1. 修复main.js的核心问题 #

修改main.js中的Express配置部分，解决变量冲突、添加路由并启动服务器：

const { app, BrowserWindow, ipcMain } = require('electron');
const axios = require('axios');
const express = require('express');
const { dialog } = require("electron");

let mainWindow;
const appPort = 3000;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true,
    }, 
  });

  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // 1. 重命名Express实例，避免和Electron的app变量冲突
  const expressApp = express(); 
  expressApp.use(express.json()); // 解析JSON请求体（如果后续需要POST请求）

  // 2. 定义/api/data2路由，处理GET请求
  expressApp.get('/api/data2', (req, res) => {
    const dx = req.query.dx;
    // 模拟API逻辑：验证参数、处理数据
    if (!dx) {
      return res.status(400).json({ error: 'dx参数缺失' });
    }
    // 返回模拟响应，实际场景替换为真实业务逻辑
    res.json({ 
      message: '参数接收成功',
      receivedDx: parseFloat(dx),
      processedData: parseFloat(dx) * 2 // 示例处理逻辑
    });
  });

  // 3. 启动Express服务器监听端口
  expressApp.listen(appPort, () => {
    console.log(`Express服务器运行在 http://localhost:${appPort}`);
  });

  ipcMain.on('fetch-data', async (event, data) => {
    const { dx} = data;

    try {
      const response = await axios.get(`http://localhost:${appPort}/api/data2`, {
        params: { dx }
      });
    
      const responseData = response.data;
      console.log('Received data from API:', responseData);
    
      // 将API响应发送回渲染进程
      mainWindow.webContents.send('api-response', responseData);
    } catch (error) {
      console.error('Error sending data to API:', error);
    
      if (error.response) {
        console.error('Response Data:', error.response.data);
        console.error('Response Status:', error.response.status);
      } else if (error.request) {
        console.error('No response received:', error.request);
      } else {
        console.error('Error:', error.message);
      }
    }
  });

  mainWindow.webContents.openDevTools();
});

关键修改点： #

• 变量名冲突修复：将Express实例从app改为expressApp，避免覆盖Electron的全局app对象。
• 添加路由定义：创建/api/data2的GET路由，接收并处理dx参数，返回合法响应。
• 启动服务器监听：调用expressApp.listen()让服务器在3000端口运行，确保请求能被接收。

2. 优化渲染进程的反馈（可选） #

在renderer.js中添加接收API响应的逻辑，将结果显示到页面：

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

const fetchButton = document.getElementById('fetchButton');
const dxInput = document.getElementById('dxInput');
const dataDisplay = document.getElementById('dataDisplay');

fetchButton.addEventListener('click', async () => {
    const dx = parseFloat(dxInput.value);
    if (isNaN(dx)) {
      dataDisplay.textContent = '请输入有效的数字';
      return;
    }
    ipcRenderer.send('fetch-data', { dx });
});

// 接收API响应并显示
ipcRenderer.on('api-response', (event, responseData) => {
  dataDisplay.innerHTML = `
    <h3>API响应结果：</h3>
    <p>消息：${responseData.message}</p>
    <p>接收的dx值：${responseData.receivedDx}</p>
    <p>处理后的数据：${responseData.processedData}</p>
  `;
});

3. 测试验证 #

1. 确保已安装所有依赖：npm install electron axios express
2. 运行Electron应用：electron .
3. 在输入框中输入数字，点击Submit按钮，查看控制台日志和页面显示的响应结果。

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