Cookie 사용법

• 썸네일 출처: Unsplash 의 Mae Mu

쿠키는 대체 어떻게 설정하고 사용할까?

프론트엔드 분야로 공부하다보면 쿠키란 말을 많이 듣는다. HTTP의 특성에 따라 통신이 지속적이지 않고, 통신이 한 번 끊기면 서로의 상태(정보)가 사라져 불편한 경우들이 생긴다. 이런 문제를 해결하기 위해 브라우저와 서버는 쿠키에 정보를 담아 주고 받는다. 그럼 이 쿠키는 서버와 클라이언트 각각의 코드에서 어떻게 설정하고 사용하는 걸까?

쿠키를 설정하는 방법

쿠키를 설정하기 위해선 브라우저와 서버 각각에서 요청 옵션과 HTTP 헤더를 설정해줘야 한다.

• 서버에서는 HTTP 헤더에 Access-Control-Allow-Credentials, Access-Control-Allow-Origin, Set-Cookie 속성의 값이 들어가 있어야 한다.
• 클라이언트에서는 요청 방법(fetch, axios, xmlrequest)에 따라 credentials 또는 withCredentials 옵션이 설정되어 있어야 한다.

아래 예제는 node express 서버에서 cors 미들웨어를 활용해 해당 속성을 설정하였다.

const cors = require("cors");

const corsOptions = {
	origin: 'http://localhost:5173',
	credentials: true,
  };

app.use(cors(corsOptions));

app.get("/", (reqest, response) => {
	response.setHeader('Set-Cookie', 'nickname=heya;');
});

아래 예제는 react 와 axios 를 사용해 withCredential 옵션을 넣어 요청을 보내는 버튼을 만들었다.

import axios from "axios";

function App() {
  const onClickHandler = () => {
    axios.get('http://localhost:3000/', {
     withCredentials: true
    })
	...
  };

  return (
    <div>
      <button onClick={onClickHandler}>GET</button>
    </div>
  )
}

쿠키를 보는 방법

서버에서 응답과 함께 보낸 쿠키는 브라우저의 쿠키 저장소에 저장된다. 쿠키 저장소는 개발자도구 -> 애플리케이션 -> 쿠키 에서 확인할 수 있다. 뿐만 아니라 개발자도구 -> 네트워크 에서 요청과 응답의 헤더가 제대로 세팅 되었는지, 에러가 발생하지는 않았는지도 확인할 수 있다.

• 쿠키 저장소에 저장된 쿠키

• 개발자도구 -> 네트워크 탭에 요청 내역이 나온다.

• 요청을 클릭하면 헤더와 응답에 담긴 정보들을 보다 상세하게 볼 수 있다.

• 쿠키와 관련된 설정이 되어있는 응답 헤더

주의사항

• 서버에서 Access-Control-Allow-Credentials 속성을 false 로 설정해도 Set-Cookie 속성에 쿠키의 키와 값이 있다면 쿠키가 브라우저에 저장되는 것을 막을 수 없었다.
  다만 Error 를 발생시켜주고 네트워크의 요청 상태에 CORS 오류 를 명시해주기 때문에 클라이언트와 서버 각각에서 해당 상태를 받아 처리할 수는 있을 것 같다.

• CORS 에러가 발생하면 콘솔창에도 상세한 에러 메세지가 뜬다.