React应用与同端口Express API无法通信问题咨询

我启动React项目后运行在localhost:3000，接着启动监听同一端口的Express API服务。尝试上传包含数字的文件，期望API对数字排序后返回结果供下载，但请求始终失败。

API服务代码（app.js） #

const express = require('express');
const multer = require('multer');
const app = express();

const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

app.post('/sort', upload.single('inputFile'), (req, res) => {
    const input = req.file.buffer.toString().split('\n').map(Number);
    const result = input.sort((a, b) => b - a);
    res.setHeader('Content-Type', 'text/plain');
    res.setHeader('Content-Disposition', 'attachment; filename=result.txt');
    res.send(result.join('\n'));
});

app.listen(3000, () => {
    console.log('API is listening on port 3000');
});

React项目代码（App.js） #

import './App.css';
import {useState} from "react";
import axios from 'axios';

function App() {

  const [inputFile, setInputFile] = useState(null);
  const [result, setResult] = useState(null);
  const [processingTime, setProcessingTime] = useState(null);

  const handleFileUpload = (event) => {
    setInputFile(event.target.files[0]);
  };

  const startCalculation = async () => {
    const startTime = performance.now();
    const formData = new FormData();
    formData.append('file', inputFile);

    const response = await fetch("https://localhost:3000/sort", {
      method: 'POST',
      body: formData,
    });
    const data = await response.json();
    setResult(data.body);
    setProcessingTime(performance.now() - startTime);
  };

  const handleDownload = () => {
    const file = new Blob([result], {
      type: 'text/plain'
    });
    const fileURL = URL.createObjectURL(file);
    const link = document.createElement('a');
    link.href = fileURL;
    link.download = 'result.txt';
    link.click();
  };

  return (
      <div className="App">
        <input type="file" onChange={handleFileUpload} />
        <button onClick={startCalculation}>Start Calculation</button>
        <button onClick={handleDownload}>Download Result</button>
        <p>Processing Time: {processingTime}ms</p>
      </div>
  );
}

export default App;

问题原因及修复方案 #

1. 端口冲突 #

React和API同时监听3000端口，导致其中一个服务无法正常启动。
修复：修改API监听端口为3001：

// API代码中修改listen端口
app.listen(3001, () => {
    console.log('API is listening on port 3001');
});

同时React请求地址改为http://localhost:3001/sort（注意用http而非https）。

2. FormData字段名不匹配 #

API用upload.single('inputFile')接收文件，但React中FormData添加的字段是file，导致API无法识别上传文件。
修复：统一字段名：

// React代码中修改FormData字段名
formData.append('inputFile', inputFile);

3. 响应解析错误 #

API返回纯文本格式，但React用response.json()解析，会抛出格式错误。
修复：改用response.text()解析响应：

// React代码中修改解析方式
const data = await response.text();
setResult(data);

4. 跨域问题 #

修改端口后，React（3000）请求API（3001）会触发跨域限制，需在API中添加CORS支持：

1. 安装依赖：npm install cors
2. 在API代码中启用CORS：

const express = require('express');
const multer = require('multer');
const cors = require('cors');
const app = express();

app.use(cors()); // 启用跨域支持

// 其余代码不变

5. 空文件判断 #

添加文件为空的校验，避免无文件时触发请求报错：

// React代码中startCalculation函数添加判断
const startCalculation = async () => {
  if (!inputFile) {
    alert('请先选择文件');
    return;
  }
  // 其余代码不变
};

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