React+Node.js Heroku生产环境Axios请求返回HTML而非JSON问题排查

问题根因 #

1. 本地开发环境下process.env.NODE_ENV不为production，因此返回前端index.html的通配路由逻辑不会执行，即使API接口报错也会返回对应错误响应，不会返回HTML内容。
2. 生产环境下代码加载了通配路由app.get('/*')，所有未匹配成功的GET请求都会被该路由拦截，返回HTML文件，响应头Content-Type自然为text/html。
3. 你代码中所有数据库操作的回调函数都未处理err参数，且外层同步try/catch无法捕获异步回调内的错误。一旦生产环境出现数据库连接失败（如环境变量配置错误、数据库公网访问权限未开）、SQL执行错误的情况，接口不会执行res.json()返回响应，请求会继续向后匹配路由，最终命中通配规则返回HTML。
4. 额外排查点：如果请求方法书写错误（如POST接口发了GET请求），也会匹配不到对应API路由，触发通配规则返回HTML。

解决方案 #

1. 调整路由规则避免冲突 #

给所有API接口统一加/api前缀，彻底和前端路由区分开，避免匹配冲突：

// index.js中修改路由注册逻辑
app.use('/api', require('./routes/routes'));

前端所有Axios请求同步修改路径，例如axios.get('/api/getMovie')、axios.post('/api/addMatch', body)。

2. 补全数据库错误处理逻辑 #

所有db.query回调优先处理错误，确保异常场景也会返回JSON响应：

// 以/user接口为例，所有接口都要补全相同的错误判断逻辑
router.get('/user', (req, res) => {
    try {
        let id = req.query.id;
        let admin = 0;
        db.query("SELECT * FROM users WHERE id = ?", [id], (err, result) => {
            // 新增错误判断
            if(err) {
                console.log(err);
                return res.status(500).json({error: "数据库查询失败"});
            }
            if(result.length == 0) {
                db.query("INSERT INTO users (id, admin) VALUES (?, ?)", [id, admin], (insertErr) => {
                    // 插入操作也需要补全错误判断
                    if(insertErr) {
                        console.log(insertErr);
                        return res.status(500).json({error: "用户创建失败"});
                    }
                    return res.status(200).json({"result": result});
                });
            } else {
                return res.status(200).json({"result": result});
            }
        });
    } catch (err) {
        console.log(err);
        return res.status(400).json({error: "An error occurred with user"});
    }
});

3. 检查Heroku生产环境配置 #

• 确认Heroku应用后台的环境变量已正确配置数据库USER、HOST、PASSWORD、DATABASE参数，和本地配置一致。
• 确认你使用的MySQL数据库已开放Heroku服务器的公网访问权限，多数云数据库默认仅允许本地访问，未加白名单会导致连接失败。
• 查看Heroku应用运行日志，定位具体报错信息，优先排查数据库连接相关错误。

4. 新增全局错误处理中间件（可选） #

在index.js的app.listen之前添加全局错误处理中间件，兜底处理未捕获的异常，确保异常场景返回JSON：

app.use((err, req, res, next) => {
    console.error(err.stack);
    res.status(500).json({ error: '服务器内部错误' });
});

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