Проблема CORS с Express Серверным API для Next. js - PullRequest
Новая
       64

Проблема CORS с Express Серверным API для Next. js

0 голосов
/ 19 января 2020

У меня настроен сервер аутентификации пользователей с использованием Express и Node.js в моем локальном порте 3333, и я пытаюсь подключиться к конечной точке в Next. js порт 3000, используя isomorphi c -unfetch для получения , Я получаю сообщение об ошибке CORS 401, я уже провел немало исследований, но просто хотел узнать, возможно ли подключение к серверу Express на локальных хостах? Я попытался добавить «Access-Control-Allow-Origin»: «*», «Content-Type»: «multipart / form-data» в объект заголовка. На сервере express уже настроены 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, …}

1 Ответ

0 голосов
/ 19 января 2020

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

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

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

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

...