Next.js API Routes异常处理：前端无法展示Laravel后端错误信息

1. Laravel后端HTTP状态码设置错误 #

当用户邮箱未找到时，Laravel返回的是{ success: false, message: 'User is not registered.' }，但如果同时返回了**500（服务器内部错误）**状态码，Axios会将其判定为服务器级错误，不会自动解析响应体里的具体信息。

正确做法是返回客户端错误状态码（比如404或400），示例代码：

return response()->json([
    'success' => false,
    'message' => 'User is not registered.'
], 404); // 按语义选404或400均可

2. Next.js API Route未正确转发后端响应 #

如果你的Next.js中转接口没有同步Laravel的响应状态码和错误内容，会导致前端拿到的是Next.js自己抛出的500错误，而非后端的具体信息。

错误的中转写法：

// pages/api/forgot-password.js
import axios from 'axios';

export default async function handler(req, res) {
  try {
    const response = await axios.post('https://your-laravel-domain/forgot-password', req.body);
    res.status(200).json(response.data);
  } catch (error) {
    // 错误：直接返回500，丢失后端错误信息
    res.status(500).json({ error: 'Server Error' });
  }
}

正确的中转写法：

// pages/api/forgot-password.js
import axios from 'axios';

export default async function handler(req, res) {
  try {
    const response = await axios.post('https://your-laravel-domain/forgot-password', req.body);
    res.status(response.status).json(response.data);
  } catch (error) {
    if (error.response) {
      // 转发后端的状态码和错误内容
      res.status(error.response.status).json(error.response.data);
    } else {
      res.status(500).json({ message: '请求后端失败' });
    }
  }
}

3. 前端Axios错误处理未提取响应内容 #

即使后端和中转接口都配置正确，若前端错误捕获时未访问error.response.data，也拿不到具体错误信息。

错误的前端处理：

axios.post('/api/forgot-password', { email })
  .then(res => { /* 处理成功逻辑 */ })
  .catch(error => {
    console.log(error); // 仅打印错误对象，未提取响应体
    alert('请求失败');
  });

正确的前端处理：

axios.post('/api/forgot-password', { email })
  .then(res => { /* 处理成功逻辑 */ })
  .catch(error => {
    if (error.response) {
      // 提取后端返回的错误提示
      alert(error.response.data.message);
    } else {
      alert('网络异常，请稍后重试');
    }
  });

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