使用Axios Post结合Express时返回HTML而非预期变量的问题

核心问题 #

1. 输入值获取错误：你用innerText获取输入框内容，但输入框的用户输入内容存在value属性里，innerText无法拿到正确的输入值。
2. Axios响应处理错误：then回调里的problem是Axios的完整响应对象，不是后端返回的字符串，必须通过response.data才能获取后端发送的内容。
3. 后端跳转逻辑不匹配AJAX请求：res.redirect会让后端返回跳转指令，但Axios是异步请求，不会触发浏览器页面刷新，反而会拉取跳转目标页面的HTML，这就是你看到返回HTML的原因。

修正后的前端代码 #

function axiosCall() {
    // 改用value获取输入框的用户输入内容
    const username = document.getElementById("username").value;
    const password = document.getElementById("password").value;

    axios.post('/login', { username, password })
        .then(response => {
            const result = response.data;
            if (result === "username") {
                lespanUsername.innerHTML = "Pseudo incorrect !";
            } else if (result === "password") {
                lespanPassword.innerHTML = "Votre mot de passe est incorrect !";
            } else if (result === "success") {
                // 验证成功后由前端主动触发页面跳转
                window.location.href = "/";
            }
        })
        .catch(error => {
            // 捕获401等错误状态的响应内容
            if (error.response) {
                const result = error.response.data;
                if (result === "username") {
                    lespanUsername.innerHTML = "Pseudo incorrect !";
                } else if (result === "password") {
                    lespanPassword.innerHTML = "Votre mot de passe est incorrect !";
                }
            }
        });
}

修正后的后端代码 #

app.post('/login', urlEncodedParser, (req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    if (users.existUser(username)) {
        if (users.validUser(username, password)) {
            // 不直接跳转，返回成功标识让前端处理页面跳转
            res.status(200).send("success");
            // 更规范的做法是用JSON格式：res.status(200).json({ status: "success" });
        } else {
            res.status(401).send("password");
        }
    } else {
        res.status(401).send("username");
    }
});

额外优化建议 #

• 建议后端统一用JSON格式返回响应，比如res.status(401).json({ errorType: "username" })，这样前端处理更灵活，也方便后续扩展字段。
• 前端可以先做非空校验，避免空用户名/密码的无效请求。
• 可以将Axios请求改成async/await写法，代码结构会更简洁易读。

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