Post请求先Pending后Failed问题求助（附前后端代码）

点击页面Submit按钮触发createCar函数，通过axios向后端/createCar接口发送Post请求时，请求先处于Pending状态，随后变为Failed状态，但请求Payload包含输入的有效数据。相关代码及现象如下：

后端接口代码 #

app.post("/createCar", async (req, res) => {
    const car = req.body;
    const newCar = new CarModel(car);

    try {
        await newCar.save();

        res.json(car);
    } catch (error) {
        res.json({ msg: error })
    }
});

前端axios请求代码 #

const createCar = () => {
    Axios.post('http://locahost:3001/createCar', { company: company, model: model, year: year, power: power, price: price }).then((response) => {
      setAllCars([{ company: company, model: model, year: year, power: power, price: price }, ...allCars])
    })
}

按钮调用代码 #

<button type="button" onClick={createCar}>Submit</button>

排查方向 #

1. 前端URL拼写错误 #

前端请求地址里的locahost是拼写错误，正确应为localhost。这个错误会导致请求无法正确到达后端服务，直接触发失败。

2. 跨域资源共享（CORS）未配置 #

如果前端运行端口和后端（3001）不同，后端未配置CORS的话，浏览器会拦截跨域请求，导致请求失败。需要在后端添加CORS中间件：

const cors = require('cors');
app.use(cors());

3. 后端未解析请求体 #

如果后端没有配置express.json()中间件，req.body会是undefined，导致new CarModel(car)初始化失败，进而触发save错误。需要在后端接口之前添加：

app.use(express.json());

4. 数据库模型验证失败 #

检查CarModel的字段定义：

• 确认前端传入的字段（company、model、year、power、price）和模型定义的字段完全匹配，包括字段名、数据类型（比如year是数字还是字符串）
• 检查模型是否有必填字段未被前端传入（即使Payload看起来有效，可能存在隐藏的必填项）
• 可以在后端catch块里打印错误详情，比如console.log(error)，查看具体的验证错误信息

5. 后端错误处理不规范 #

当前后端catch块直接返回error对象，部分error属性无法被序列化为JSON，可能导致响应异常。建议修改为返回错误信息和正确的状态码：

catch (error) {
    res.status(500).json({ msg: error.message || '服务器内部错误' });
}

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