使用Axios调用API时终端无日志+400错误排查求助

一、POST /api/register 400 Bad Request 错误解决 #

1. 检查Express JSON解析中间件配置 #

后端代码注释提示需启用express.json()中间件，如果你的Express应用没配置这个，req.body会是空对象，解构出的name/email等参数全部为undefined，直接触发后端验证逻辑返回400。

解决：在Express入口文件（如server.js/app.js）中添加：

app.use(express.json());

2. 确认前端请求参数完整性 #

前端代码中console.log(name, email, password, secret)被注释，取消注释后在浏览器控制台打印参数，确认是否有值缺失。若某个参数为空，会触发后端的验证规则（比如!name时返回400）。

3. 修复前端catch块语法错误 #

前端catch块里的**strong text**是无效标记，会导致代码报错，无法执行后续的错误日志打印。删掉该行无效代码：

catch (error) {
  console.log(error.response.data);
}

4. 补全后端注册流程（影响后续功能） #

当前后端仅完成验证和邮箱查重，未实现用户创建及成功响应逻辑。验证通过后需补充：

// 取消hashPassword的导入注释
import { hashPassword } from '../helpers/auth'

// 验证通过后执行
const hashedPassword = await hashPassword(password);
const user = await new User({
  name,
  email,
  password: hashedPassword,
  secret,
}).save();

return res.status(200).send({ ok: true, message: '注册成功' });

二、终端无法输出console.log内容的问题 #

1. 区分前后端日志输出位置 #

前端的console.log会输出在浏览器控制台，而非终端；若要在终端查看后端日志，需取消后端代码里的console.log('Register endpoint =>', req.body)注释，这样后端收到请求时会在终端打印请求体。

2. 阻止表单默认提交行为（若用form标签） #

前端handleSubmit里的e.preventDefault()被注释，若该函数绑定在form的onSubmit事件上，页面会提交后刷新，导致浏览器控制台日志被清空。取消注释该行：

const handleSubmit = async (e) => {
  e.preventDefault();
  // ... 其余代码
}

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