Проблема CORS с API Express Server для Next.js

У меня есть настройка сервера аутентификации пользователей с использованием Express и Node.js в моем локальном порту 3333, и я пытаюсь подключиться к конечной точке на порту 3000 Next.js, используя isomorphic-unetch для выборки. Я получаю ошибку CORS 401, я уже провел небольшое исследование, но просто хотел узнать, возможно ли подключение к серверу Express на локальных хостах? Я попытался добавить «Access-Control-Allow-Origin»: «*», «Content-Type»: «multipart / form-data» к объекту заголовка. Экспресс-сервер уже имеет настройку cors.

Эта функция ниже вызывается нажатием кнопки.

onLoginClick = async () => {
  let header = new Headers({
    "Access-Control-Allow-Origin": "*",
    "Content-Type": "multipart/form-data"
  });
  const res = await fetch("http://localhost:3333", {
    method: "POST",
    header,
    body: JSON.stringify({
      username: "USER",
      password: "PASSWORD"
    })
  });
}

Сообщение об ошибке -

http://localhost:3333/ 401 (Unauthorized)
Response {type: "cors", url: "http://localhost:3333/", redirected: false, status: 401, ok: false, …}

authentication next.js cors express isomorphic-fetch-api
person Peter Ayello Wright    schedule 19.01.2020    source источник
comment
поделитесь своими кодами и сообщением об ошибке, пожалуйста   -  person Andy    schedule 19.01.2020
comment
Вы когда-нибудь находили решение этой проблемы?   -  person james emanon    schedule 24.05.2021

Ответы (1)


arrow_upward
2
arrow_downward

Прежде всего, CORS настраивается на стороне сервера. Вы настраиваете свой сервер, чтобы разрешить вызовы из определенных источников.

В вашем коде onLoginClick - это код на стороне клиента, он запускается в браузере, клиент не может решить, какой источник должен разрешить сервер, что нарушит цель наличия CORS.

Обычно вам не нужно изменять конфигурацию cors в приложении Next.js, потому что вы будете вызывать API из того же источника, в котором размещено приложение на стороне клиента.

По умолчанию Next.js поддерживает только то же происхождение для маршрутов API, если вам нужно настроить его, вы можете использовать micro-cors.

person Andy    schedule 19.01.2020