ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 2020/12/10 - TIL (Express Cookie 생성)
    Develop/Node.js 2020. 12. 11. 02:04

     

     

     

    쿠키(Cookie)란?

    쿠키란 하이퍼 텍스트의 기록서의 일종으로 인터넷 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말합니다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 변경됩니다.

     

     

     


     

    쿠키 옵션

    • Name : 쿠키의 이름
    • Value : 쿠키의 내용
    • Domain : 쿠키가 전송되게 될 호스트들을 명시하며, 명시가 되지 않았다면 현재 문서
      위치의 호스트를 default로 가진다(ex : www.google.com)
    • Path : 쿠키 헤더를 전송하기 위해서 요청되는 url
    • Expires / Max-Age : 쿠키의 만료시간
    • Size : 쿠키의 크기
    • HttpOnly : 자바스크립트의 document.cookie를 이용해서 쿠키에 접속하는 것을 막음
    • Secure : 웹 브라우저와 서버가 https 프로토콜로 통신하는 경우에만 쿠키 사용을 허용함
    • SameSite : CSRF(Cross Site Request Forgery)공격을 막기 위해 사용함

     


     

    Express에서 Cookie 사용하기

     

    npm install cookie-parser

    request와 response에서 cookie를 다루기 위해서 cookie-parser모듈을 설치합니다.

     

     

    const cookieParser = require('cookie-parser');
    
    app.use(cookieParser());

    Express App에 cookieParser를 등록합니다.

     

     

     

    쿠키 생성

     

    app.get('/login', function(req,res) {
        res.cookie(KEY, VALUE, {options});
        res.send('set-cookie');
    });
    

    key 와 value 부분에 원하는 데이터를 작성하고 options는 위의 쿠키 옵션에 맞추어 작성합니다.

     

     

    쿠키 조회

    app.get('/state', function(req,res) {
        res.send('cookie : ' + req.cookies.key);
    });
    
    

    req.cookies 객체를 통해서 지정한 쿠키의 key값으로 접근할 수 있습니다.

     

     

    쿠키 제거

    app.get('/logout', function(req,res) {
        res.clearCookie(key);
    });
    

    제거할 쿠키의 key값을 clearCookie의 인자로 전달하면 제거됩니다.

     


     

    서로 다른 도메인 간 쿠키 주고받기

     

    백엔드와 프런트엔드의 도메인 주소가 서로 다른 경우에는 서로 쿠키가 전송되지 않으므로 요청/응답 헤더를 적절하게 설정을 해주어야 합니다.

     

     

    fetch

    fetch(loginUrl, {
      method: 'POST',
      credentials: 'include', // <-- credentials 옵션 추가
      body: JSON.stringify({
        userId: 'id'
        password:'1234',
      }),
      headers: {
        'Content-Type': 'application/json',
      },
    })

     

    cors

    app.use(
      cors({
        origin: 'https://localhost:3000',
    	methods: 'GET,POST,OPTION',
    	credentials: true, // credentials true 설정
    	optionsSuccessStatus: 204,
      })
    );

     

Designed by Tistory.