调用NextJS API时出现ERR_SSL_WRONG_VERSION_NUMBER错误求助

1. 修复ERR_SSL_WRONG_VERSION_NUMBER错误 #

你的前端代码里硬编码了https://localhost:3000/api/categories，但本地开发时NextJS默认用HTTP而非HTTPS启动，强制用HTTPS会触发SSL版本不匹配错误。

• 改用HTTP地址：await fetch("http://localhost:3000/api/categories")
• 更推荐用相对路径（避免硬编码域名，适配不同环境）：await fetch("/api/categories")

2. 解决相对路径提示无效URL的问题 #

如果用fetch("/api/categories")仍报错，逐一排查以下点：

• API文件路径是否合规：确认API路由文件放在app/api/categories/route.ts（App Router）或pages/api/categories.ts（Pages Router）目录下，NextJS会自动映射该路径，路径不对会导致路由无法识别。
• 组件类型与fetch规则：你的SectionContent是异步组件，在App Router中默认是服务器组件，服务器组件调用相对路径的fetch时，NextJS会自动处理为内部API请求，无需额外配置；如果是客户端组件，确保开发服务器正常运行，没有跨域配置冲突。
• 重启开发服务器：执行npm run dev重启服务，缓存异常可能导致路由映射失效。

3. 额外排查项 #

• 确认getServerSession配置正确：API路由中使用getServerSession需要在next-auth.config.ts或相关配置文件中正确设置authOptions，会话验证配置错误可能间接引发请求异常。
• 检查Prisma连接状态：确保数据库连接正常，虽然数据库查询失败不会直接导致URL无效或SSL错误，但会影响API响应结果。

修改后的前端组件示例 #

export default async function SectionContent() {
  const getData = async () => {
    // 使用相对路径，服务器组件下自动处理内部请求
    const res = await fetch("/api/categories");

    if (!res.ok) {
      console.error("Failed to fetch data:", res.statusText);
      throw new Error("Failed to fetch categories");
    }

    return res.json();
  };

  const categories: Category[] = await getData();

  return (
    <div className="p-10 space-y-14 w-full h-full">
      <div className="flex gap-x-3">
        <span className="text-3xl">📦</span>
        <span className="font-extrabold text-3xl">Todo list</span>
      </div>
      <CreateTodoDialog />
      <TodoSection />
    </div>
  );
}

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