[Nest.js][CORS] GET 요청에서 cookie를 전달받지 못하는 문제

개요

https://4sii.tistory.com/421

[Nest.js][CORS] cookie를 전달받지 못하는 문제

위 글과 이어진다.

 

위 포스팅에서는 POST 요청에서 쿠키를 전달받지 못하는 상황에 대해 

해결하는 과정을 다뤘는데

 

이번에 물론 테스트 하는 상황이었지만 GET 요청에서 쿠키를 전달받지 못하는 상황을 겪었다.

 

Back-End: Controller

@Get(':meetupId')
async getMeetup(@Param('meetupId') meetupId: number, @Req() req: Request): Promise<Meetup> {
  console.log(req.cookies);

  return await this.meetupsService.getMeetup(meetupId);
}

 

Front-End: 요청 페이지

function showDetail(meetupId) {
    axios
      .get(`http://localhost:8080/api/meetups/${meetupId}`, {}, { withCredentials: true })
      .then((response) => {
        // ...생략

 

분명 하던 것과 똑같이 했는데 안되는 상황이었고

웃긴건 POST 요청으로 둘다 바꿔서 진행했더니 

잘 전달되는 것을 볼 수 있었다.

 

그렇다는건 GET 요청에 대해 withCredentials가 먹히지 않는다는건데

아무래도 키워드가 GET이다보니 구글링하기도 힘들었고

내가 찾는 상황에 대해서는 좀처럼 찾을 수 없었다.

 

해결방법

그러다가 이제 코드를 디깅할 능력이 되서인지 

아예 문제가 되는 axios의 get, post 함수에 대해 각각 파고 들어가봤다.

 

post 를 썼을 때 세 번째 인자에 withCredentials을 넣었었으니 config에 해당한다는 걸 알 수 있다.

그렇다면 get을 쓸 때 config의 위치가 두 번째 인자니까

애초에 요청할 때 넣는 위치가 잘못되었기 때문에 withCredentials 옵션이 제대로 작동을 안했다는 것을 알 수 있었다.

 

Front-End: 요청 페이지

function showDetail(meetupId) {
    axios
      .get(`http://localhost:8080/api/meetups/${meetupId}`, { withCredentials: true })
      .then((response) => {
          // ...생략

이와 같이 작성할 경우 제대로 동작하는 것을 확인할 수 있었다.

 

get, post 이외에도 위에 나온 코드에 따르면 

자주 사용하는 요청에 대해 고려했을 때

delete 요청도 get과 같이 두 번째 인자로 withCredentials 옵션을 넣어야 하고

put, patch는 post와 같이 세 번째 인자로 withCredentials 옵션을 넣으면 된다는 것을 알 수 있다.

 

해결!