NestJS Cors와 Cookie설정

현재 테크팀에서는 프론트엔드는 Next.js(React), Nuxt.js(Vue)를 사용하여 개발하고 백엔드는 스프링부트, NestJS를 이용하여 개발하고 있기 때문에 프론트엔드와 백엔드의 도메인의 오리진이 서로 다르고, 그로인해 서로 리소스를 주고받기 위해서 반드시 CORS(Cross-Origin Resource Sharing)설정을 해줘야 합니다.

 

Cors

// 기본설정값으로 다음의 설정값이 적용됨.
/*{
  "origin": "*",
  "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
  "preflightContinue": false,
  "optionsSuccessStatus": 204
}*/
app.enableCors();

// 옵션 설정
app.enableCors({
    origin: ['https://www.example.com', 'http://localhost:3330'], 
    credentials: true,
    exposedHeaders: ['Authorization'], // * 사용할 헤더 추가.
 });

다음과 같이 cors설정은 매우 간단합니다.

기본설정을 통하여 전체를 허용할수도 있으며, 옵션 설정으로 배포 서버의 오리진과 로컬서버의 오리진에 대해서만 설정할 수도 있습니다.

 

 

현재 테크팀에서는 인증을 JTW 토큰을 사용하는데 해당값을 쿠키에 저장하여 사용하고 있고, 해당 토큰외에도 몇가지의 사이트 설정값을 쿠키로 이용하였기 때문에 요청된 쿠키를 쉽게 추출할 수 있도록 도와주는 미들웨어인 cookie-parser를 설정을 추가 하였습니다.

Cookie

"dependencies": {
    "cookie-parser": "^1.4.6",
    
},
"devDependencies": {
    "@types/cookie-parser": "^1.4.6",
 },

package.json에 다음을 추가하고 패키지를 설치하자.

 

@Get('/cookies')
getCookies(@Req() req: Request, @Res() res: Response): any {
    const jwt =  req.cookies['jwt'];
    return res.send(jwt);
}

다음과 같이 request(req) 객체에 cookies 속성이 부여되었기 때문에 쉽게 쿠키값을 확인할 수 있게 됩니다.

 

다음과 같이 쿠키에 저장된 jwt토큰값을 읽어서 정상적으로 반환한 것을 확인할 수 있습니다.

 

이상 Cors와 Cookie 설정 관리에 대한 글을 마치며, 다음글에서는 Health Check 방법에 대해 간단하게 설명하도록 하겠습니다.