Nuxt3开发Twitter克隆时登录接口访问失败问题排查

我用Nuxt3开发Twitter克隆项目，登录页面因接口访问问题无法完成。文件结构如下：

• useAuth.js 位于 components/login/ 目录
• login.post.js 位于 server/api/auth/ 目录

调用接口时使用 /api/auth/login，出现"Nuxt server file - Inaccessible"错误，Chrome控制台有相关报错，但VSCode无对应输出，需要排查问题原因。

useAuth.js 代码 #

export default () => {
  const login = ({ email, password }) => {
    return new Promise(async (resolve, reject) => {
      try {
        const data = await $fetch("/api/auth/login", {
          method: 'POST',
          body: {
            email,
            password,
          },
        });

        console.log(data.accessToken);
      } catch (error) {}
    });
  };

  return {
    login,
  };
};

login.post.js 代码 #

import { getUserByUsername, exclude } from "../../db/Users";
import bcrypt from "bcrypt";
import { sendError } from "h3";
import { generateTokens, sendRefreshToken } from "../../../components/Login/JWT";
import { createRefreshTokens } from "../../db/refreshTokens";

export default defineEventHandler(async (event) => {
  const body = await readBody(event);

  const { username, Pass } = body;

  if (!username || !Pass) {
    return sendError(
      event,
      createError({ statusCode: 400, message: "Missing fields" })
    );
  }

  // Is the user existing?

  const user = await getUserByUsername(username);

  if (!user) {
    return sendError(
      event,
      createError({
        statusCode: 400,
        message: "Username or password is invalid!",
      })
    );
  }

  // verify credentials

  const isPasswordCorrect = bcrypt.compareSync(Pass, user.Pass);

  if (!isPasswordCorrect) {
    return sendError(
      event,
      createError({
        statusCode: 400,
        message: "Username or password is invalid!",
      })
    );
  }

  // Generate Token

  const { accessToken, refreshToken } = await generateTokens(user);

  await createRefreshTokens({
    token: refreshToken,
    userID: user.id,
  });

  // Cookies
  sendRefreshToken(event, refreshToken);

  return {
    accessToken: accessToken,
    user: exclude(user, ["Pass", "repeatPass"]),
  };
});

可能的问题点及排查步骤 #

1. 前后端参数不匹配
   前端传的是email和password，但后端接收的是username和Pass，参数名完全不一致，会直接触发后端的"Missing fields"错误，甚至导致接口访问异常。需统一前后端参数名。

2. 文件路径/大小写问题
   检查server/api/auth/login.post.js的路径是否符合Nuxt3路由规则，Linux环境下要注意文件夹/文件名大小写（比如Auth和auth会被视为不同路径），路径错误会导致接口不可访问。

3. 依赖或导入错误

   • 确认bcrypt已安装：执行npm install bcrypt，Windows环境需额外配置编译环境。
   • 检查自定义模块的导入路径，比如../../../components/Login/JWT是否正确，路径错误会导致服务器启动失败，引发接口不可访问。

4. 前端错误捕获缺失
   前端catch块为空，无法看到具体报错信息。建议在catch中添加console.error(error)，获取Chrome控制台的详细错误日志。

5. 开发服务器状态异常
   重启Nuxt开发服务器（执行npm run dev），避免文件变更未被正确监听导致的接口失效。

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