Приложение React, экспресс-сервер — установка файла cookie, который не сохраняется в браузере

Длинный короткий - это...

Мой экспресс-сервер устанавливает файл cookie и отправляет его обратно клиенту, все отлично работает, когда я использую Postman и свое приложение React Native. Проблема в том, что веб-версия, которая выполняется через ReactJs, делает тот же запрос, но cookie сохраняется в браузере.

Итак, я знаю, что куки работают, но не для веб-версии, что странно, когда я создал тестовую конечную точку http://localhost:3000/server и вызываю ее прямо из браузера, где хранится куки.

Итак, это мой код, выполняющий простую выборку на сервер, который затем отправляет обратно файл cookie:

  const fetchData = async () => {
    try {
      const res = await fetch(`http://192.168.0.11:3000/server/`, {
        credentials: "include",
      });
      if (res.ok) {
        const resData = await res.json();
        console.log({ resData });
      }
    } catch (err) {
      console.log({ err });
    }
  };

Запрос вернулся успешно, но куки не сохранены

введите здесь описание изображения

Доступ к той же конечной точке из браузера напрямую приводит к следующему:

введите здесь описание изображения

введите здесь описание изображения

Выдержка из заголовка ответа при отправке показывает, что файл cookie был отправлен в ответе, а не сохранен во внешнем интерфейсе.

введите здесь описание изображения


person Mr Day2Day    schedule 10.03.2021    source источник
comment
Какой адрес обслуживает приложение реакции? Готов поспорить, что экспресс-корс — это тема, которую вы хотите исследовать. По умолчанию файлы cookie будут храниться только в том случае, если реагирующее приложение и сервер обслуживаются из одного и того же источника. Если URL-адрес вашего приложения для реагирования не начинается с http://192.168.0.11:3000, то проблема в этом.   -  person erich2k8    schedule 10.03.2021
comment
@ erich2k8 Почему приложение react native отлично сохраняет и обслуживает файлы cookie? express cors был настроен как таковой credentials: true, origin: true файл cookie был создан и отправлен в заголовке ответа, но интерфейс ReactJs почему-то не распознает/не видит его.   -  person Mr Day2Day    schedule 10.03.2021
comment
react-native не работает в браузере. Он даже не использует файлы cookie. Существуют библиотеки, которые приближают поведение, но, например. react-native-cookies даже не имеет слова origin в кодовой базе, у него явно нет мер безопасности, которые есть у браузеров. Проверьте заблокированную вкладку на скриншотах выше.   -  person erich2k8    schedule 10.03.2021
comment
Я понял, что использовал эту библиотеку для обработки файлов cookie. Заблокированные вкладки пусты, куки не заблокированы.   -  person Mr Day2Day    schedule 10.03.2021
comment
Как было сказано до того, как файл cookie отправляется обратно клиенту, и когда я ввожу конечную точку непосредственно в браузер, он получает файл cookie, сохраняет его и также выводит ответ JSON. В приложении React он просто выводит ответ и не обрабатывает файл cookie.   -  person Mr Day2Day    schedule 10.03.2021


Ответы (1)


Было довольно просто исправить

Я использовал http://localhost:3001 для приложения реакции, вместо этого я просто использовал IP-адрес http://192.168.0.11:3001

person Mr Day2Day    schedule 10.03.2021
comment
Где ты его добавил? Я хочу сказать, что именно вы сделали, чтобы заставить его работать? - person AbrarShahriar; 09.04.2021