[쿠키 에러]쿠키 왔는데 저장을 못하니? SameSite 이슈

에러 배경

원티드 프리온보딩 10월 FE 챌린지 실습 중 발생한 에러

 

Client(React + TS), Server(Next.js)를 동시에 로컬에서 실행시켜 동작해보는 과정이었다.

브라우저는 Chrome(크롬)을 사용하는 중이다.

 

서버와 클라이언트 모두 잘 실행 시킨 상황에서 Post 요청을 통해 로그인을 하고 성공하면 쿠키가 저장되야 하는 과정에서 쿠키가 저장이 되지 않아 다음 단계를 진행할 수 없었다.

에러 그 잡채

Post 요청의 응답(Response)과 쿠키(Set-Cookie)는 넘어오지만 저장이 되지 않고 개발자 도구에서

"SameSite 옵션이 'Lax'이기 때문에 저장이 되지 않는다. 해당 옵션은 Origin을 맞춰야한다."

라는 경고를 알려주는 상황이다. (사진 찍는걸 깜박해서 정확한 경고가 아니다. 비슷한 문장이었음.)

또한 로그인 후 정보를 가져오는 Get 요청의 응답도 쿠키가 없어 403 Forbidden 이라고 뜨는 상황이다.

해결 과정

시도1. 혹시 Get 요청이 Post 요청 전에 날라가 에러가 발생한건가? 아니오😥

요청 순서의 문제인지 확인했지만 아니었다.

 

시도2. Post 요청 함수가 잘못되었나? 아니오😥

요청 함수를 잘 살펴 봤지만 문제가 없어보였다. 문제라고 해봐야 credentials 속성이 headers에 포함된 속성이 아닌 자체 옵션이라는 정도였다. 혹시나해서 headers 바깥으로 옮겨보았지만 역시나 똑같은 상황이다.

const BASE_URL = "http://localhost:4000"

const loginResponse = await fetch(`${BASE_URL}/login`, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        // credentials: "include", // headers의 옵션이 아님
    },
    credentials: "include",
    body: {
        username: "user",
        password: "pwd",
    },
});

if(loginResponse.ok) {...}

 

시도3. 크롬에서 CORS 문제를 넘기기 위해서 설정하는 부분이 문제였는가? 아니오😥

크롬에서 CORS 문제를 해결하기 위해서 임시방편으로 사용한 방법이 있어 그 부분의 문제였는지 확인했지만 아니었다.

chrome.exe 파일이 있는 폴더를 찾는다.
Chrome 바로가기를 우클릭하고 속성에 대상을 보면 위치를 찾을 수 있다.

cmd 창을 열고 해당 위치로 이동한다.
$ cd C:\...\Google\Chrome\Application

이동했다면 CORS를 무시하는 옵션과 함께 사용자 데이터를 저장할 임시 파일을 만들고 실행한다
chrome.exe --disable-web-security --user-data-dir=%LOCALAPPDATA%\Google\chromeTemp

 

해결. 요청하는 URL이 localhost인 것이 문제인가? 예쓰😆

혹시나 해서 요청하는 URL을 도메인 네임인 localhost가 아닌 IP 주소 127.0.0.1로 바꾸니 거짓말처럼 멀쩡하게 동작했다.

const BASE_URL = "http://127.0.0.1:4000" // IP로 수정하니까 멀쩡히 동작함...

 

정리

코드에서 찾아볼 수 있는 방법은 거의 찾아보고 시도했다고 생각을 했고 고민을 엄청했다.

남은 에러 상황을 천천히 생각해보니 도메인을 잘 못 인식한다는 생각이 들었다. 물론 지금 상황은 같은 localhost로 포트만 다르게 진행하는 상황이라 생각하지도 못했다. 처음 겪는 상황이라 포트번호가 다르면 다른 도메인으로 인식을 하는건가?해서 찾아보았지만 아니었다. 그래서 혹시나 하는 상황으로 IP로 변경해 봤는데 멀쩡히 동작하길래 멍하니 있다가 와 어이가 없다라는 결론이 나왔다.ㅋㅋㅋㅋㅋㅋ

동작이 끝나고 생각을 해보고 찾아보았는데 크롬에서 쿠키 정책을 SameSite 옵션을 none으로 사용하지 못하게 하면서 어디에선가 꼬인 느낌이다. 왜냐하면 다른 사람들은 멀쩡히 동작하는 사람들이 많았기 때문이다. 허허