Axios POST请求后res.send无法向客户端返回数据或错误问题排查

我用Axios发送JSON格式的表单数据到服务端，服务端完成验证后，客户端既收不到响应数据也抓不到错误信息。

客户端代码 #

async function postData() {
                const data = {
                    email: d.querySelector("#email").value,
                    pwd: d.querySelector("#pwd").value
                }
               await axios({
                    method: "post",
                    url: "/",
                    data: data,
                    headers: {
                        "Content-Type": "application/json"
                    }
                });               
            }
postData()
    .then((response) => {
        console.log("Sent");
        console.log(response);
    })
    .catch((error) => {
        console.log("There was an error:", error);
    });

服务端代码 #

app.post("/", (req, res) => {
    const { error, value } = schema.validate(req.body);
    if (error) {
        console.log(error); 
        res.send("A server error has occured"); //THIS DOESN'T WORK
    }
    else {
        console.log(value);
        res.send("Successfully posted"); //THIS DOESN'T WORK
    } 
});

问题诊断与修复 #

1. 客户端：未返回Axios请求结果 #

你的postData是async函数，但内部await axios(...)后没有return请求结果，导致后续.then()拿到的response是undefined，即使服务端正常响应，你也看不到返回内容。

修复后客户端代码：

async function postData() {
    const data = {
        email: document.querySelector("#email").value,
        pwd: document.querySelector("#pwd").value
    }
    // 返回axios请求的Promise，让后续then/catch能拿到响应
    return await axios({
        method: "post",
        url: "/",
        data: data,
        headers: {
            "Content-Type": "application/json"
        }
    });               
}
postData()
.then((response) => {
    console.log("Sent");
    console.log(response.data); // 打印服务端返回的响应体内容
})
.catch((error) => {
    // 优先打印服务端返回的错误信息，没有的话再打印错误消息
    console.log("There was an error:", error.response?.data || error.message);
});

2. 服务端：未配置JSON请求体解析中间件 #

Express默认不会自动解析JSON格式的请求体，导致req.body为undefined，你的schema验证会报错，甚至请求可能因为未正确解析而挂起，最终客户端收不到响应。

修复后服务端代码：

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

// 必须添加这行，用于解析JSON格式的请求体，放在所有路由之前
app.use(express.json());

app.post("/", (req, res) => {
    const { error, value } = schema.validate(req.body);
    if (error) {
        console.log(error); 
        // 返回400状态码表示客户端参数错误，同时返回错误信息
        res.status(400).send("请求参数错误：" + error.details[0].message);
    }
    else {
        console.log(value);
        res.send("Successfully posted");
    } 
});

新手优化建议 #

• 客户端侧：

  • 变量名要清晰，把d改成document，避免后续维护混淆。
  • 用axios.post简化写法：return axios.post("/", data)，Axios会自动为JSON数据设置Content-Type: application/json，无需手动配置。
  • 捕获错误时，优先读取error.response.data（服务端返回的错误详情），再用error.message做兜底。

• 服务端侧：

  • 验证错误时返回对应HTTP状态码（如400表示客户端参数错误），不要用默认的200状态码，让客户端能准确判断请求结果。
  • 可以把Joi（假设你用的是Joi）验证的详细错误信息返回给客户端，方便调试。
  • 确保所有代码分支都有响应输出（比如res.send/res.json/res.end），避免请求挂起。

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