Как использовать куки между клиентом Next.js и сервером Next.js в локальной среде разработки?

Содержание

Вопрос или проблема
Дополнительный контекст:
Итог:
Попытанное решение:
Проблема:
Ответ или решение
Шаги для настройки cookie в локальной среде разработки
Заключение

Вопрос или проблема

Недавно я начал изучать Next.js и работаю над проектом с его использованием. Извиняюсь заранее, если мои знания недостаточны.

Я в настоящее время разрабатываю в среде Next.js Pages Router. Фронтенд работает локально по HTTPS, в то время как бэкенд API развернут на сервере. Когда пользователь успешно входит в систему, бэкенд устанавливает куки с следующими атрибутами:

SameSite = None
Secure = true
HttpOnly = true
Domain = .example.com

В этом случае куки правильно отправляются и включаются в запросы от клиента Next.js к серверу бэкенда, потому что домен куки установлен на .example.com, что совпадает с доменом сервера бэкенда service.example.com.

Однако куки не включаются при выполнении запросов от клиента Next.js к серверу Next.js из-за несоответствия доменов. В результате сервер Next.js не может использовать эти куки при перенаправлении запросов на сервер бэкенда.

В производственной среде я могу обеспечить соответствие доменов для решения этой проблемы. Но я хотел бы достичь такого же поведения в своей локальной среде разработки.

Дополнительный контекст:

После успешного входа на странице /signin я получаю ответ set-cookie от сервера бэкенда.
Затем я перенаправляю пользователя на страницу /dashboard. Когда происходит перенаправление на страницу /dashboard, клиент Next.js запрашивает страницу у сервера Next.js, и я хочу, чтобы куки были включены в этот запрос.
На странице /dashboard я хочу использовать getServerSideProps для получения данных, используя куки, установленные сервером во время входа.
Проблема, похоже, в том, что поскольку домен куки установлен на .example.com, клиент Next.js не прикрепляет куки при выполнении запросов к серверу Next.js (localhost:3000).

Итог:

Фронтенд работает локально по HTTPS, а сервер бэкенда (service.example.com) развернут. Я хочу включить куки, установленные сервером бэкенда, в запросы от клиента Next.js к серверу Next.js. Причина в этом – использовать куки в getServerSideProps для получения данных.

Попытанное решение:

В логике входа я проверяю, является ли среда локальной. Если да, я бы заново установил куки с доменом, установленным на localhost, что позволило бы использовать их для связи между клиентом Next.js и сервером Next.js.

Проблема:

Когда токены истекают, бэкенд отправляет новый ответ set-cookie, и синхронизация этих куков между локальной средой и производственной логикой кажется сложной. Я ищу лучшее решение, прежде чем переходить к этому подходу.

Ответ или решение

Для работы с cookie в локальной среде разработки с использованием Next.js клиент и сервер, необходимо учитывать некоторые аспекты, чтобы обеспечить правильное поведение при передаче cookie между вашим приложением и бэкендом. Рассмотрим шаги, которые помогут решить возникшую у вас проблему.

Настройка сервера для локальной разработки:
Чтобы ваши cookie корректно передавались от клиента Next.js к серверу, вам нужно убедиться, что в вашей локальной среде разработки используется правильная конфигурация. Так как ваше приложение работает на localhost, необходимо изменить атрибуты cookie при их установке для локальной разработки.

Изменение логики установки cookies:
Когда вы получаете cookie от бэкенда после успешного входа в систему, вы можете проверить, запущены ли вы в локальной среде. Если это так, вам следует переустановить cookie с учетом домена localhost. Вот пример кода для реализации этой логики в вашем обработчике аутентификации:

// Пример функции, которая обрабатывает вход пользователя
const handleLogin = async (req, res) => {
   const response = await fetch('https://service.example.com/api/login', {
       method: 'POST',
       body: JSON.stringify(req.body),
       headers: { 'Content-Type': 'application/json' },
   });

   const data = await response.json();

   if (response.ok) {
       // Получаем cookie из ответа
       const cookies = data.cookies; // Пример получения cookies

       // Если это локальная разработка, то переустанавливаем cookie
       if (process.env.NODE_ENV === 'development') {
           res.setHeader('Set-Cookie', [
               `cookieName=${cookieValue}; Path=/; HttpOnly; SameSite=None; Domain=localhost`
           ]);
       } else {
           res.setHeader('Set-Cookie', cookies); // cookie для продакшена
       }

       res.redirect('/dashboard');
   } else {
       // Обработка ошибки
       res.status(401).json({ error: 'Ошибка аутентификации' });
   }
};

Использование getServerSideProps на /dashboard:
На странице /dashboard, при использовании getServerSideProps, вы должны иметь доступ к cookie, установленным на предыдущем шаге. Например:

export async function getServerSideProps(context) {
   const { req } = context;

   // Получаем cookie из запроса
   const cookies = req.headers.cookie || '';

   // Ваша логика для получения данных с использованием cookie
   const data = await fetch('https://service.example.com/api/data', {
       method: 'GET',
       headers: {
           'Cookie': cookies,
       },
   });

   const jsonData = await data.json();

   return {
       props: {
           data: jsonData,
       },
   };
}

Синхронизация cookie при истечении срока действия:
Если бэкенд отправляет новый Set-Cookie при истечении токетов, вы можете использовать похожую логику для обработки этих запросов и переустановки cookie в локальной среде. Обрабатывайте ответ от бэкенда и изменяйте cookie, если необходимо.

Заключение

Таким образом, вы можете добиться работы с cookie в локальной среде разработки, использовав условную логику для перенастройки cookie в зависимости от окружения. Это позволит вам корректно передавать cookie между клиентом и сервером Next.js без необходимости изменения вашего производственного кода, а также уменьшит сложность при синхронизации cookie между средами.

Обратите внимание, что такое поведение должно быть тщательно проверено при переходе на производственную среду, чтобы избежать потенциальных уязвимостей безопасности.