解决Next.js API路由中Axios异常导致的未处理运行时错误

我在Next.js中创建API路由，用于向后端发送请求并在Cookie中存储令牌。当前功能能正常运行，但4xx响应会触发未处理的运行时错误，我希望自行处理该错误，而非使用默认提示。错误提示如下：

未处理运行时错误
AxiosError: 请求失败，状态码400

当前API路由代码：

import { signIn } from '@/services/auth'
import { NextApiRequest, NextApiResponse } from 'next'

export default async function signInHandler (req: NextApiRequest, res: NextApiResponse) {
  const { userName, password } = req.body
  const response = await signIn({ userName, password }).catch(e => e.response)
  if (response.status === 200) {
    // save token in cookies
  }
  return res.status(response.status).json(response.data)
}

signIn及Axios实例配置代码：

// signIn
export const signIn = ({ userName, password }: {userName: string, password: string}) =>
  api.post(`${baseEndpoint}/sign-in`, { userName, password })

// api
export const api = axios.create({
  baseURL: baseApiUrl,
  headers: {
    'Content-Type': 'application/json'
  }
})

解决方案 #

问题核心是Axios默认会对4xx/5xx响应抛出错误，而你当前的catch(e => e.response)仅处理了有response属性的错误，一旦出现无响应的异常（比如网络中断），response会变为undefined，后续访问response.status会触发新的未捕获错误，导致Next.js抛出运行时提示。可以通过两种方式解决：

方式1：完善API路由的全量错误捕获 #

直接用try/catch包裹逻辑，覆盖所有错误场景：

import { signIn } from '@/services/auth'
import { NextApiRequest, NextApiResponse } from 'next'

export default async function signInHandler(req: NextApiRequest, res: NextApiResponse) {
  try {
    const { userName, password } = req.body
    const response = await signIn({ userName, password })
    
    if (response.status === 200) {
      // 示例：将令牌存入HttpOnly Cookie
      // res.setHeader('Set-Cookie', `authToken=${response.data.token}; Path=/; HttpOnly; Secure`)
    }
    
    return res.status(response.status).json(response.data)
  } catch (error: any) {
    // 分场景处理错误
    if (error.response) {
      // 后端返回4xx/5xx响应
      return res.status(error.response.status).json(error.response.data)
    } else if (error.request) {
      // 请求已发送但无响应（网络问题）
      return res.status(500).json({ message: '无法连接到后端服务' })
    } else {
      // 请求初始化阶段的错误
      return res.status(500).json({ message: error.message })
    }
  }
}

方式2：全局配置Axios不抛出4xx错误 #

如果希望Axios把4xx响应当作成功请求处理，可在创建实例时修改validateStatus规则：

export const api = axios.create({
  baseURL: baseApiUrl,
  headers: {
    'Content-Type': 'application/json'
  },
  validateStatus: (status) => {
    // 仅当状态码≥500时才抛出错误
    return status < 500
  }
})

配置后，4xx响应会直接进入then回调，无需额外捕获，你可以直接通过response.status判断处理逻辑。

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