Next.js API路由handler中catch代码块无法调用res.end()问题排查求助

嘿，我帮你定位到问题所在啦！核心原因是你的API路由handler参数写错了，导致拿到的res根本不是真正的响应对象，自然调用不了end()方法。

为什么会报错？ #

Next.js的API路由handler必须接收两个参数：第一个是请求对象req，第二个才是响应对象res。但你的代码里只声明了res这一个参数——这就意味着Next.js把请求对象req传给了你的res变量，而真正的响应对象你根本没拿到！

req是请求对象，它没有end()、setHeader()这些响应对象才有的方法，所以不管是在then还是catch里调用这些方法，本质上都是在错误的对象上操作。你说then里正常，大概率是测试时的误判，或者代码执行到报错前就提前结束了。

怎么修复？ #

1. 先修正handler的参数签名 #

补上req参数，同时别忘了导入NextApiRequest类型：

import axios from "axios";
import { NextApiRequest, NextApiResponse } from "next"; // 新增NextApiRequest导入

const handler = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  // ... 你的逻辑代码
};

2. 用async/await重构代码（更简洁可靠） #

Next.js原生支持async函数的API路由，没必要手动包裹new Promise，用try/catch替代then/catch可读性更强：

import axios from "axios";
import { NextApiRequest, NextApiResponse } from "next";

const handler = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  try {
    const response = await axios({
      method: "get",
      headers: { "Content-type": "application/json" },
      url: process.env.NODE_ENV === "production" 
        ? "https://.../refresh_token" 
        : "http://localhost:4000/refresh_token",
      withCredentials: true,
    });

    // 设置缓存头，然后用Next.js封装的json方法返回响应
    res.setHeader("Cache-Control", "max-age=180000");
    res.status(200).json(response.data);
  } catch (error) {
    // 安全处理错误信息，避免类型问题
    const errorMessage = error instanceof Error ? error.message : "Unknown server error";
    res.status(500).json({ message: errorMessage });
  }
};

export default handler;

3. 尽量用Next.js封装的响应方法 #

Next.js给NextApiResponse提供了很多便捷方法，比如：

• res.status(code)：快速设置状态码
• res.json(data)：自动设置Content-Type: application/json并发送JSON数据
• res.send(text)：发送文本响应
  这些方法比手动设置statusCode和调用end()更安全，也更符合Next.js的最佳实践。

额外提醒 #

• 确保你的跨域配置正确，withCredentials: true需要后端配合允许携带Cookie
• 错误处理时最好判断error是否为Error实例，避免类型断言带来的潜在问题

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