MERN栈Axios提交表单报404错误（Postman请求正常）

1. 前端请求路径与代理配置问题 #

你的前端Axios请求使用相对路径/api/recipes，如果前端开发服务器（比如React默认端口）和后端3000端口不一致，或端口冲突导致前端跑在其他端口，请求会发送到前端服务器而非后端，直接触发404。

解决方法： #

• 配置React代理：在前端项目的package.json中添加代理配置，自动将API请求转发到后端端口：

"proxy": "http://localhost:3000"

添加后重启前端开发服务器，相对路径的请求会自动指向后端3000端口。

• 使用完整请求URL：直接修改Axios请求的目标地址为后端完整路径：

const response = await axios.post("http://localhost:3000/api/recipes", formData);

2. 手动设置Content-Type的错误 #

你在请求中手动设置了"Content-Type": "multipart/form-data"，这会丢失FormData自动生成的boundary参数，导致后端multer无法正确解析表单数据。即使当前是404问题，这个错误后续也会导致请求处理失败，必须修正：

删除手动设置的headers，Axios会自动根据FormData生成正确的请求头：

// 移除以下代码
const headers = {
  "Content-Type": "multipart/form-data",
};
// 修改请求代码为
const response = await axios.post("/api/recipes", formData);

3. 额外潜在问题 #

• 数据格式不匹配：前端传递的ingredients是JSON字符串，但后端Schema定义的ingredients是[String]数组类型，需要在后端接口中添加解析步骤：

// 在后端POST接口中替换原有的ingredients获取逻辑
const ingredients = JSON.parse(req.body.ingredients);

否则存入数据库的会是字符串而非数组。

• multer目录权限：确保后端项目根目录下的uploads/文件夹存在且具备读写权限，否则图片上传环节会失败。

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