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

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

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more