Axios请求后页面未跳转仅控制台输出HTML的问题求助

问题根源 #

当使用Axios发送AJAX异步请求时，浏览器不会像处理普通表单提交那样自动跟随服务器返回的重定向指令跳转页面。Axios会自动跟进重定向，将目标页面的HTML内容作为响应数据返回，这就是你在控制台看到HTML但页面未跳转的核心原因。

解决方案1：后端返回跳转URL，前端手动触发页面跳转 #

这种方式灵活可控，适合需要在提交后做前端逻辑处理的场景。

修改后端/verify/:ref端点，返回包含跳转地址的JSON响应：

app.post('/verify/:ref', (req, res) => { 
    // 先执行你的业务逻辑（比如验证reference、存储数据等）
    res.json({ redirectUrl: '/confirmation' })
})

前端Axios请求中拿到URL后，通过window.location.href跳转：

axios.post(`/verify/${reference}`, { appData, programData })
    .then((response) => {
        if (response.data.redirectUrl) {
            window.location.href = response.data.redirectUrl;
        }
    })
    .catch((e) => {
        console.log(e.response.data)
    })

解决方案2：用普通表单提交替代Axios #

如果你的提交流程不需要前端异步处理逻辑，直接用HTML表单提交是最简单的方式，浏览器会自动处理服务器的重定向：

HTML表单示例：

<form method="POST" action="/verify/<%= reference %>">
    <!-- 用隐藏字段传递appData和programData -->
    <input type="hidden" name="appData" value='<%= JSON.stringify(appData) %>'>
    <input type="hidden" name="programData" value='<%= JSON.stringify(programData) %>'>
    <button type="submit">提交</button>
</form>

后端保持原有的重定向逻辑即可：

app.post('/verify/:ref', (req, res) => { 
    res.redirect('confirmation')
})

解决方案3：配置Axios不自动跟随重定向，手动处理响应头 #

通过设置Axios的maxRedirects参数为0，阻止自动跟随重定向，然后从响应头中获取跳转地址：

前端代码修改：

axios.post(`/verify/${reference}`, { appData, programData }, { maxRedirects: 0 })
    .then((response) => {
        // 302状态码会进入catch分支，这里不会触发
    })
    .catch((e) => {
        if (e.response.status === 302) {
            // 从响应头获取跳转地址，注意处理相对路径
            const redirectUrl = e.response.headers.location;
            window.location.href = redirectUrl;
        } else {
            console.log(e.response.data)
        }
    })

总结 #

• 优先推荐方案1或方案2：方案1适合需要前端后续处理的场景，方案2适合简单提交流程；
• 方案3需要额外处理响应头和路径问题，仅在特殊场景下使用。

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