DEV Community

Kesio
Kesio

Posted on

Как пользоваться cookie в NestJS и локальном фронте

Пишу статьи для себя, что бы не забывать все, но может кому то тоже поможет.
Я написал backend на NestJS, все протестил однако когда решил писать frontend появились сразу проблемы, я не мог сохранить cookie в браузер и потом их прочитать с backend-а. В cookie я хранил jwt-токен.


Для начала нужно установить cookie-parser.

npm i cookie-parser @types/cookie-parser
Enter fullscreen mode Exit fullscreen mode

После заходим в наш main.ts и изменяем его.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as cookieParser from 'cookie-parser';


async function bootstrap() {
  const PORT = 3001;
  const app = await NestFactory.create(AppModule);

  app.use(cookieParser()); // Подключаем

  await app.listen(PORT, () => console.log(`http://localhost:${PORT}/`));
}
bootstrap();
Enter fullscreen mode Exit fullscreen mode

Используем Response в Контроллере

@Post('login')
    login(@Res({ passthrough: true }) res: Response) {
        const jwt = "blablawdsfblabla"
        res.cookie('jwt', jwt, { httpOnly: true, secure: false });
        return {
            message: 'success'
        };
    }
Enter fullscreen mode Exit fullscreen mode

passthrough - При использование декоратора @Res вы теряете совместимость с функциями NestJS, поэтому чтобы их исправить вы добавляете passthrough: true
httpOnly - запрет на доступ к Cookie из JavaScript-а
secure - для доступа по http, т.е. отключаем защиту (Если поставить тру, то выйдет вот такая ошибка: POST http://localhost:3001/auth/login net::ERR_CONNECTION_REFUSED)


На frontend-е вам нужно будет использовать withCredentials

axios.post("http://localhost:3001/auth/login", {
  email: "nurislam@mail.com",
  password: "12345678"
}, {withCredentials: true})
Enter fullscreen mode Exit fullscreen mode

Все, теперь у вас сохраняются куки в браузере, надеюсь помог кому то еще кроме себя. У меня будут в будущем еще статьи для нубов и меня.

Top comments (0)