Блог

Чтобы было проще, у меня есть ПОРТ Node.js / express: 3001 API и интерфейсный ПОРТ nextjs: 3000, кажется, все работает нормально, пока я не решил использовать файлы cookie для хранения JWT, а затем отправлять его обратно в API с каждым запросом.

Когда пользователь входит в систему из браузера, у меня есть это (на экспресс) для файла cookie:

       res.cookie("JWT_TOKEN", token, {
        maxAge: 7000 * 40 *60*60, // just for testing
        httpOnly: false,
        domain: 'localhost',
        path: '/',
        signed: false,
        secure: false,
      });
 

И в браузере устанавливается файл cookie.

Но мне абсолютно не повезло с получением cookie обратно, я вижу его в заголовках, но не в express.

Это в части nextjs:

 export async function getServerSideProps(ctx) {
  const {
    query: { page = 1 },
  } = ctx;
  console.log(ctx.req.headers);
  try {
    const { data } = await axios.get(
      `http://localhost:3001/api/movies?page=${page}`,
      { headers: { Authorization: "Bearer test" } },
      { withCredentials: true }
    );
    return {
      props: data,
    };
  } catch (error) {
    return {
      notFound: true,
    };
  }
}
 

Так что в ctx.req.headers есть файл cookie

 {
  host: 'localhost:3000',
  connection: 'keep-alive',
  'sec-ch-ua': '"Google Chrome";v="87", " Not;A Brand";v="99", "Chromium";v="87"',
  'sec-ch-ua-mobile': '?0',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36',
  accept: '*/*',
  'sec-fetch-site': 'same-origin',
  'sec-fetch-mode': 'cors',
  'sec-fetch-dest': 'empty',
  referer: 'http://localhost:3000/movies',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-GB,en;q=0.9,it-IT;q=0.8,it;q=0.7',
  cookie: 'JWT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjIsInJvbGUiOiJ1c2VyIiwiaWF0IjoxNjA4ODk5Njg4fQ.9b9Nl5FWynXa38o-VJyT_B8vBeSk6WyBoPeuv_6GLSo'
}
 

Но на сервере, используя анализатор файлов cookie, я получаю ответ: (регистрация файлов cookie и req.headers)

 [Object: null prototype] {}
{
  accept: 'application/json, text/plain, */*',
  authorization: 'Bearer asd',
  'user-agent': 'axios/0.21.0',
  host: 'localhost:3001',
  connection: 'close'
}
 

Наконец, я попытался из postman установить несколько файлов cookie, и это работает!

 {
  POSTMAN: 'ALL_GOOD',
  JWT_TOKEN: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjIsInJvbGUiOiJ1c2VyIiwiaWF0IjoxNjA4OTAwMzE2fQ.56DBF0xw2_dHy16dANwQlIkuX_zhUZMaTcDqLv7kyv4'
}
{
  'user-agent': 'PostmanRuntime/7.26.8',
  accept: '*/*',
  'cache-control': 'no-cache',
  'postman-token': '0cea19b2-16a0-46f2-a311-d4d28f04d42a',
  host: 'localhost:3001',
  'accept-encoding': 'gzip, deflate, br',
  connection: 'keep-alive',
  cookie: 'POSTMAN=ALL_GOOD; JWT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjIsInJvbGUiOiJ1c2VyIiwiaWF0IjoxNjA4OTAwMzE2fQ.56DBF0xw2_dHy16dANwQlIkuX_zhUZMaTcDqLv7kyv4'
}
 

Так что либо я делаю что-то неправильно, что более чем вероятно, поскольку я немного запутался в аутентификации и авторизации, либо я что-то упускаю из виду в том, как работает nextjs. Одна вещь, которую я заметил, — это URL-адрес на вкладке сеть, запрос будет

 Request URL: http://localhost:3000/_next/data/development/movies.json
 

вместо того , чтобы http://localhost:3001/api/movies

Но кроме этого я заблудился.

Я мог бы сделать что-то вроде этого

     const { data } = await axios.get(
      `http://localhost:3001/api/movies?page=${page}`,
      { headers: { Authorization: `Bearer ${ctx.req.headers.cookie}`, cookie:  ctx.req.headers.cookie} },
      { withCredentials: true }
    );
 

И теперь у меня есть доступ к нему в express, но по какой-то причине это кажется неправильным, поскольку файл cookie уже находится в заголовках.

Есть идеи о том, что происходит?

Используете ли вы анализатор файлов cookie?

 var express = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())
 

Тогда вы можете использовать

 app.get('/', function (req, res) {
   console.log('Cookies: ', req.cookies)
})
 

Файлы cookie доступны только локально на компьютере пользователя. Вы не можете извлечь их файлы cookie через свой сервер. Вам нужна база данных, и это будет означать, что вы не можете использовать файлы cookie для хранения. Используйте firebase Google, поскольку записывать данные очень просто. Таким образом, вам не придется использовать длинные серверные алгоритмы!