DEV Community

Kesio
Kesio

Posted on

3 1

Как пользоваться 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

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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more