React向Express上传本地文件出现404错误，求排查

我帮你梳理下几个关键的错误点，一个个来修复就能解决问题啦：

1. React Proxy配置位置错误 #

你的React项目package.json里，proxy配置被错误地放在了browserslist的development数组内部，这会导致proxy完全不生效。Proxy必须放在package.json的顶层，和scripts、dependencies同级。

修改后的React package.json片段：

{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000", // 移到顶层位置
  "dependencies": {
    // 你的依赖项保持不变
  },
  "scripts": {
    // 你的scripts保持不变
  },
  "eslintConfig": {
    // 保持不变
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

2. Axios请求URL错误 #

你在React组件的onSubmit方法里，用了绝对路径http://localhost:3000/uploads，但React运行在3000端口，Express在5000端口，这种写法会绕过proxy直接请求React服务器，自然找不到/uploads接口。应该用相对路径/uploads，让proxy自动转发到Express的5000端口。

修改React组件中的axios请求：

const res = await axios.post('/uploads', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

3. Express文件存储路径缺少斜杠 #

你的Express代码里，file.mv的目标路径少了一个斜杠，导致文件会被存在client/public/uploads文件名（比如uploadsmyimage.jpg），而不是client/public/uploads/myimage.jpg，这不仅会导致文件存储位置错误，还可能引发目录不存在的报错。

修改Express的路径拼接：

file.mv(`${__dirname}/client/public/uploads/${file.name}`, err => {
  // 原有的回调逻辑保持不变
})

4. React错误处理逻辑错误 #

你在catch块里判断err.response.data.msg === 500，这是逻辑错误——500是HTTP状态码，不是msg的内容。另外，当出现404时，要单独处理这种情况，避免err.response.data.msg为undefined的问题。

修改React的catch块：

catch (err) {
  if (err.response) {
    if (err.response.status === 500) {
      console.log("There was a problem with the server.");
    } else if (err.response.status === 404) {
      console.log("Upload endpoint not found - check your server URL and routes.");
    } else {
      console.log(err.response.data.msg || "Upload failed");
    }
  } else {
    console.log("No response from server - make sure Express is running on port 5000.");
  }
}

最后几个额外检查点 #

• 确保client/public/uploads文件夹已经手动创建，否则Express会因为找不到目录而报错。
• 用正确的方式启动项目：运行npm run dev同时启动Express和React，或者分别启动npm run server（Express）和npm start（React）。
• 确认Express的express-fileupload中间件已经正确加载（你的代码里app.use(fileUpload());是正确的）。

内容的提问来源于stack exchange，提问作者David.Warwick