브라우저에서 요청시 request header에 cookie가 담기지 않는다면

문제

Access-Control-Allow-origin을 허용을 했는데도 웹에서 보내는 요청에 cookie를 포함해서 서버에 보낼 수 없었다

브라우저에서 github 도메인의 쿠키를 만들고 github api request header에 담기는지 확인해보았다

원하는 동작은 위와 같이 cookie가 세팅됐다면 api 요청시 request header에 담기는 것이었으나 담기지 않고 있었다

원인

Access-Control-Allow-origin을 허용한다고 해서 쿠키를 헤더에 담을 수는 없는데, 그 이유는 기본적으로 브라우저가 제공하는 요청 API 들은 별도의 옵션 없이 브라우저의 쿠키와 같은 인증과 관련된 데이터를 함부로 요청 데이터에 담지 않도록 되어있기 때문이다.

해결

이를 해결하기 위한 옵션이 withCredentials
따라서, 쿠키나 인증 헤더 정보를 포함시켜 요청하고 싶다면 클라이언트와 서버나 둘다 Credentials 부분을 true로 설정해주어야 한다.

• axios에서는 withCredentials: true
• 서버에서는 Access-Control-Allow-Credentials: true