Express向AJAX POST请求返回JSON无响应、页面重定向如何解决

• 前端参数配置错误：withCredentials是XHR跨域携带Cookie的配置项，不属于业务请求参数，放入请求body会导致后端参数校验不通过，触发重定向逻辑
• AJAX请求被默认行为中断：如果提交按钮位于<form>标签内，未阻止表单默认提交行为，浏览器会直接跳转页面，导致AJAX请求被终止，回调不触发
• 后端前置中间件触发重定向：登录校验、权限校验等前置中间件在你写的返回JSON逻辑之前就执行了302重定向，浏览器会自动跟随重定向，不会触发AJAX回调
• 跨域配置缺失：前后端域名/端口不一致时，未配置跨域规则会导致预检请求失败，请求直接中断
• URL匹配异常：若后端开启严格路由匹配，带查询参数的请求无法命中对应路由，触发全局404重定向逻辑

前端修改 #

1. 修正AJAX请求配置，改用更稳妥的$.ajax写法，调整withCredentials的配置位置，同时添加完整回调监听：

// 提交事件触发时先阻止默认行为
$('你的提交按钮选择器').click(function(e) {
    e.preventDefault() // 阻止form默认提交跳转，非常重要
    $.ajax({
        type: 'POST',
        // 确认URL和实际请求地址一致，需要带查询参数可以直接拼接在此处
        url: 'http://localhost:8080/verifyOTP?phone=' + phone + '&m=' + m,
        data: JSON.stringify({
            phone: phone,
            m: m,
            otp: otp
        }),
        xhrFields: {
            withCredentials: true // 跨域带Cookie的正确配置位置
        },
        success: function(res) {
            console.log('请求成功', res);
        },
        error: function(xhr, status, error) {
            console.log('请求错误', xhr.responseText, status, error);
        },
        dataType: "json",
        contentType: "application/json"
    });
})

2. 打开浏览器控制台「网络」面板，确认请求状态码、响应头，验证请求是否命中后端目标接口，还是直接返回了302重定向。

后端修改 #

1. 修正校验中间件逻辑，区分AJAX请求和普通表单请求，AJAX请求校验失败直接返回JSON，不做重定向：

// 示例：校验中间件调整
app.use('/verifyOTP', (req, res, next) => {
    // 你的业务校验逻辑，如OTP校验、session校验
    const isOtpValid = false // 替换为实际校验结果
    if (!isOtpValid) {
        // 判断是否为AJAX请求
        if (req.xhr || req.headers.accept?.includes('json')) {
            // 返回对应错误状态码和JSON信息
            return res.status(400).json({ msg: 'Incorrect OTP...' })
        }
        // 仅普通表单请求做重定向
        return res.redirect('/上一个页面路径')
    }
    next()
})

2. 配置CORS跨域规则，支持前端跨域请求携带Cookie：

const cors = require('cors')
app.use(cors({
    origin: 'http://你的前端访问域名:端口', // 禁止写*，否则withCredentials不生效
    credentials: true
}))

3. 确认后端路由未开启严格匹配，Express默认忽略查询参数做路由匹配，无需额外调整。

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