httpOnly cook ie не отправляется с запросом от getInitialProps [Next.js]

Question

Я устанавливаю httpOnly cook ie (jwtToken) с сервера, и он устанавливается на веб-интерфейсе. Я могу видеть повара ie в devTools.

Теперь, если я сделаю запрос к серверу из getInitalProps, используя следующий код,

  const data = await fetch(`${process.env.API_URL}/me`, {
    credentials: 'include',
  }).then((res) => res.json());

jwtToken cook ie не отправляется с запросом.

Я тоже пытался это сделать

  const data = await fetch(`${process.env.API_URL}/me`, {
    credentials: 'include',
    headers: {
      cookie:  context.req.headers.cookie
    },
  }).then((res) => res.json());

, но это не сработало.

Однако, когда я делаю тот же запрос от useEffect работает отлично. Может кто-нибудь, пожалуйста, помогите мне отправить это jwtToken на сервер с getInitialProps?

Answer 1

Фактической проблемой было отсутствие jwtToken cook ie от context.req.headers.cookie. Это будет работать на локальном хосте, но не на производстве.

Решением этой проблемы является установка domain для вашего повара ie. Таким образом, если веб-интерфейс находится на example.com, а сервер API на api.exmaple.com, то установка домена на .example.com решит эту проблему.

res.cookie('jwtToken', token, { httpOnly: true, domain: '.example.com'});

Answer 2

Существует много путаницы относительно того, когда getInitialProps вызывается из.

Есть 2 контекста, из которых он вызывается: 1. На стороне сервера, когда отображается начальная страница. это означает, что ваш клиент отправляет повара ie в запросе, и вам нужно передать его на запрос "сервер-сервер".

Клиентская сторона, на второй странице (клиентская навигация). это означает, что браузер присоединяет cook ie к запросу ajax.

Component.getInitailProps = async context => {
  const data = await fetch(`${process.env.API_URL}/me`, {
    credentials: 'include', // tells the browser to attach cookies
    ...(context.req
      ? {
          headers: {
            Cookie: Object.entries(context.req.headers.cookie)
              .map(([key, value]) => `${key}=${value}`)
              .join('; '),
          },
        }
      : {}),
  }).then(res => res.json());
};

Для серверной части вам нужно передать строку, поэтому я создаю cook ie строка с использованием Array.map.