ERR_SSL_WRONG_VERSION_NUMBER при получении данных из API Nextjs

Я пытаюсь получить некоторые данные из моего API NextJS, однако когда я это делаю, я получаю эту ошибку SSL, даже когда я получаю с помощью fetch~("/api/categopries"), он говорит неверный URL-адрес, но мой API находится в том же каталоге.

export default async function SectionContent() {
  const getData = async () => {
    const res = await fetch("https://localhost:3000/api/categories");

    if (!res.ok) {
      console.info("Failed to fetch data");
    }

    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>
  );
}

Это мой API

export async function GET(req: Request) {
  const session = await getServerSession();

  if (!session?.user) {
    return NextResponse.json({ message: "Invalid session" }, { status: 400 });
  }

  const user = await prisma.user.findUnique({
    where: {
      email: session.user.email || "",
    },
  });

  if (!user) {
    return NextResponse.json({ message: "User not found" }, { status: 400 });
  }

  const categories = await prisma.category.findMany({
    where: {
      authorId: user.id,
    },
    include: {
      todos: true,
    },
  });

  return NextResponse.json(categories, { status: 201 });
}

я попытался выполнить обновление npm, но это не решило проблему.

Вы уверены, что используете веб-сервер в безопасном режиме? По умолчанию он небезопасен (или http)

Anya Shenanigans 19.05.2024 20:00

Ты прав! Спасибо, я не увидел лишних букв, думал, что это https.

RakibulB 19.05.2024 20:19
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
395
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Похоже, вы столкнулись с ошибкой SSL при получении данных из API Next.js. Проблема может быть связана с тем, что вы используете https://localhost:3000 в качестве URL-адреса конечной точки API. При доступе к локальному серверу вам следует использовать «http://localhost:3000» вместо «https».

Попробуйте обновить вызов выборки следующим образом:

const res = await fetch("http://localhost:3000/api/categories");

Это должно устранить ошибку SSL. Кроме того, убедитесь, что ваша конечная точка API правильно определена в файле API Next.js, и что в маршруте нет опечаток или проблем.

Если после внесения этого изменения вы по-прежнему сталкиваетесь с проблемами, дважды проверьте настройку сервера Next.js, включая любые конфигурации SSL или прокси-серверы, которые могут влиять на вашу локальную среду разработки.

Было ли это создано ИИ?

tdy 20.05.2024 01:51

Другие вопросы по теме