使用Axios请求/api/register遇404错误，寻求路由排查方案

问题描述 #

计算机科学专业大二学生开发社交网站克隆项目时，调用Axios POST /api/register 出现404错误，手动访问 localhost:3000/api/register 也返回404页面。尝试将register.ts改为route.ts未解决问题，代码配置无明显异常。

相关代码 #

RegisterModal.tsx 提交逻辑 #

const onSubmit = useCallback(async() => {
        try {
            setIsLoading(true);
            await axios.post('/api/register', {
                email, password, username, name
            });

            toast.success('Account created.');

            signIn('credentials', {
                email,
                password
            });

            registerModal.onClose();
        } catch (error) {
            console.log(error);
            toast.error('Something went wrong.');
        } finally {
            setIsLoading(false);
        }
    }, [registerModal, email, password, username, name]);

register.ts API路由代码 #

import {NextApiRequest, NextApiResponse} from "next";
import bcrypt from "bcrypt";
import prisma from "../../../libs/prismadb";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method != 'POST') return res.status(405).end();

    try {
        const {email, username, name, password} = req.body;
        const hashedPassword = await bcrypt.hash(password, 12);
        const user = await prisma.user.create({
            data: {
                email,
                username,
                name,
                hashedPassword
            }
        });

        return res.status(200).json(user);
    } catch (error) {
        console.log(error);
        return res.status(400).end();
    }
}

current.ts API路由代码 #

import {NextApiRequest, NextApiResponse} from "next";
import serverAuth from "../../../libs/serverAuth";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method != 'GET') return res.status(405).end();

    try {
        const {currentUser} = await serverAuth(req);
        return res.status(200).json(currentUser);
    } catch (error) {
        console.log(error);
        return res.status(400).end();
    }
}

排查步骤 #

• 区分Next.js路由版本
  • Pages Router：API文件必须放在pages/api/目录下，文件名直接对应路由（如pages/api/register.ts对应/api/register），导出默认handler函数。
  • App Router：API文件必须放在app/api/[路由名]/单独文件夹下，文件名为route.ts，导出对应HTTP方法的函数（如POST、GET）。你改register.ts为route.ts无效，大概率是没建对应文件夹。
• 核对目录结构
  • Pages Router正确结构：

    project-root/
      pages/
        api/
          register.ts
          current.ts
    

  • App Router正确结构：

    project-root/
      app/
        api/
          register/
            route.ts
          current/
            route.ts
    

• 重启开发服务器
  有时文件新增后服务器不会自动热重载，执行npm run dev重启，确保路由文件被编译加载。
• 验证current.ts路由状态
  手动访问localhost:3000/api/current，如果也返回404，说明整个API路由配置存在问题；如果正常，说明register相关文件的路径或命名有误。
• 检查配置文件
  查看next.config.js，确认未设置basePath（若设置需在请求路径前添加对应前缀），也未配置rewrites规则干扰/api/register路径。
• 确认路径拼写
  确保前端请求路径/api/register和后端路由文件路径完全匹配，注意Next.js路由大小写敏感。

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