선요약
1. fetch API에서 credentials : 'include' 추가 후 브라우저에 토큰 정상 저장 확인
2. vscode의 127.0.0.1 도메인을 localhost로 변경 후 페이지 이동 시에도 쿠키가 정상적으로 남아있는 것을 확인
안녕하세요 오늘 제가 경험했던 삽질 중 하나인 쿠키에 대해서 기록을 해보겠습니다.
저는 백엔드 개발자를 지망하고 있습니다.
포트폴리오를 만들 때 백엔드 지망하시는 분들은 thymeleaf를 사용하여 서버사이드 렌더링 사용하여 웹 페이지를 만드는 것으로 알고 있습니다.
하지만 저는 주로 API 요청을 프론트와 주고 받는게 일반적으로 백엔드 개발자가 많이 겪는 상황이라고 생각하여 ChatGPT의 도움을 받아 vscode IDE를 이용하여
HTML, CSS, JS 만 사용하여 보여주기 부끄러운 간단한 프론트 페이지를 구현하였습니다.
서론이 너무 길었네요
일단 제가 겪었던 쿠키에 대한 문제는 이렇습니다.
스프링에서 프론트로 쿠키를 만들어서 주었습니다.
private Cookie createCookie(String key, String value) {
Cookie cookie = new Cookie(key, value);
cookie.setMaxAge(24*60*60);
cookie.setSecure(false);
cookie.setPath("/");
cookie.setHttpOnly(false);
return cookie;
}
Cookie cookie = createCookie("refresh", refresh);
response.addCookie(cookie);해당 메소드를 사용하여 쿠키를 만들고 response에 담아 프론트로 보냈습니다.
하지만 프론트로 보낸 쿠키가 크롬 브라우저의 Application 탭을 확인을 해보아도 쿠키가 저장이 되지않았습니다.
스프링 MVC 및 스프링 시큐리티에서 CORS 설정은 해줬는데도 계속 안되었습니다.
답답한 마음에 구글에서 방법을 찾아보고 여러 방법을 적용해보았지만 안되던 찰나
async function example() {
try {
const response = await fetch('example', {
method: 'GET',
credentials: 'include', <<<<< 이 부분!
headers: {
'access': `${token}`,
'Content-Type': 'application/json',
},
});
if (response.status === 401) {
await example();
return exmaple();
}
if (!response.ok) {
throw new Error('데이터를 불러오는 데 실패했습니다.');
}
const data = await response.json();
example(data);
} catch (error) {
console.error('Error:', error);
alert(error.message);
}
}credentials : 'include' 부분을 추가하고 마침내 쿠키가 구글 브라우저에 저장되기 시작했습니다!
하지만 그 이후에 또 문제가 발생했는데
로그인 페이지에서 쿠키를 받아서 홈페이지로 이동을 하게되면
쿠키가 사라지는 것 이었습니다.
처음에는 쿠키 설정에서 http프로토콜을 사용하고 있는 환경에서
Secure설정을 None으로 하고 SameSite 옵션을 None으로 사용하여
문제가 발생하는것으로 추측하여 https 프론트 백 둘다 자체 인증서를 사용하여 https 프로토콜을 사용했지만
인증서 신뢰 문제로 인해 프로토콜을 다시 http로 되돌려 놓았습니다.
분명 SameSite 옵션 때문에 그런 것 같은데 아무리 바꿔도
페이지가 이동을 하면 쿠키가 사라졌습니다.
왜 도메인이 둘다 localhost인데 문제가 생길까 싶었습니다.
문제는 이 부분이었습니다.
개발자 도구에서는 크로스 사이트 요청 문제가 발생했다고 경고를 보여줬으나
127.0.0.1 == localhost를 같다고 생각하여 신경쓰지 않고 있었는데
vscode의 127.0.0.1 도메인을 localhost로 바꿔보니
페이지 이동을 하여도 쿠키가 남아있었습니다.
당연하게 localhost의 도메인 이름의 주소가 IP 127.0.0.1 을 나타낸다고 생각하다보니
브라우저는 127.0.0.1 과 localhost를 같지 않다고 인식할 줄 생각을 못했습니다.
해당 문제를 해결하려고 일수로는 2일을 허비하다보니
너무 허무했습니다. ㅠㅠ
어쨌든 저 같은 사람이 또 나타날지는 모르겠지만
생각보다 너무 긴 시간을 삽질했다보니 기록을 남겨놓습니다.