쿠키 맛잇겠당
오늘의 TIL은 갑자기 궁금한게 생겨서 궁금증을 해결하는 과정이다..
원하는 것 :
1. 특정 정보를 저장해놓고 다음 요청에 자동으로 값을 넣어주고 싶다!!
2. 그런데 그 요청에서 자동으로 값이 들어가는 곳이 어딘지모르겠다!
3. 쿠키는 어디서 받아오는가??
팀원이 어디서 주워들었는데 헤더로 정보를 전달받으면 RequestBody 따로 만들지않아도 가져올 수 있고, 프론트쪽에서도 값을 넣어주기가 편하다는 소리를 들었다.
진짠가!
결론만 말하면
- "프론트에서도 넣기 쉽다" -> 맞음
- 전송 위치가 고정됨 -> 맞음 (GET, POST, PUT 등 HTTP 메서드에 관계없이 헤더는 항상 붙일 수 있음)
- Spring에서는 @RequestHeader로 쉽게 꺼낼 수 있음 -> 맞..음(DTO 만들지 않고 간단히
@RequestHeader("Subscription-Id") String id로 받음)
헤더와 쿠키는 서로 비교군이 되기 좀 애매하긴 한데 내가 잠시 헷갈렸던 부분은 짚고가려고 함
헤더 값은 "브라우저가 자동으로 유지하지 않음"
Authorization, subscriptionId 같은 헤더는 클라이언트(예: JavaScript 코드, Postman, etc.)가 매 요청마다 직접 붙여줘야 한다.
쿠키(Cookie)는 조건을 만족하면 브라우저가 자동으로 다음 요청에도 붙여준다.
단, 이건 동일한 도메인이거나 domain 속성에 따라 허용된 경우에만.
어차피 쿠키에서 사용된 정보는 다른 도메인으로 넘어갈 일이 없고(여러 도메인 살 돈도 없다 ^^)
특정 정보를 저장해두고 다음 요청에 자동으로 보내고 싶다!
이럴 때 가장 많이 사용하는 방법은 쿠키(Cookie) 또는 브라우저 저장소(localStorage, sessionStorage), 그리고 헤더(Header)다.
| 방법 | 특징 | 자동 전송 여부 |
|---|---|---|
| localStorage / sessionStorage | 브라우저 내 임시 저장소 | 자동 전송 안됨 (JS로 꺼내서 헤더에 수동 설정 필요) |
| Cookie | 브라우저가 Set-Cookie 받은 후 보관 | ✅ 같은 도메인/경로 요청 시 자동으로 붙음 |
| Header | JS 코드에서 수동으로 붙여야 함 | 자동 전송 안됨 (fetch/axios 등으로 직접 추가 필요) |
쿠키쓰라고한다.
쿠키는 서버로 전송될 때 자동으로 Cookie 헤더에 담겨 전송됨.
프론트에서 JS 코드로 수동으로 붙이면 → Header 로 붙음:
Spring에서 쿠키는 어디서 받아오는가?
| 항목 | 역할 |
|---|---|
expires | 언제까지 살아있을지 설정 |
domain | 어느 도메인에 보낼지 결정 |
path | 어떤 경로에만 보낼지 제한 |
secure | HTTPS일 때만 전송되도록 제한 |
HttpOnly | JS에서 못 건드리게 함 (보안 강화) |
쿠키 생성
ResponseCookie cookie = ResponseCookie.from("Subscription-Id", "123")
.httpOnly(true) // JS에서 접근 못하게 (보안 강화)
.secure(true) // HTTPS에서만 전송
.doamin("localhost")
.path("/") // 전체 경로에 쿠키 전송
.maxAge(Duration.ofDays(1)) // 1일 유효
.sameSite("Lax") // 기본값 또는 "Strict", "None"
.build();
return ResponseEntity.ok()
.header(HttpHeaders.SET_COOKIE, cookie.toString())
.body("쿠키 설정 완료!");
}
| 구성 요소 | 예시 | 설명 |
|---|---|---|
name=value | accessToken=abc123 | 쿠키의 키와 값. 클라이언트는 이걸 저장하고 이후 요청 시 Cookie 헤더에 포함해서 서버에 전달함 |
expires=[Date] | expires=Wed, 12 Jun 2025 10:00:00 GMT | 쿠키의 만료 시점 (절대 시간). 이 시간이 지나면 브라우저가 쿠키 삭제함. |
domain=[Domain] | domain=example.com | 이 도메인에만 쿠키가 전송됨. sub.example.com까지 포함하고 싶으면 .example.com으로 설정 |
path=[Path] | path=/user | 이 경로 이하의 요청에만 쿠키가 전송됨. 예: /user/profile에는 보내짐, /admin에는 아님 |
secure | (flag만 있음) | 이 플래그가 있으면 HTTPS로 보낼 때만 쿠키가 전송됨. HTTP 요청에는 안 붙음 |
HttpOnly (이미지엔 없지만 중요) | - | JS에서 document.cookie로 접근 불가하게 만듦. XSS 보호용으로 거의 항상 붙임 |
JS 에서
fetch("http://localhost:8080", {
method: "GET",
credentials: "include"
});
이 방식이면 http://localhost:8080 에 포함된 쿠키값들을 포함한다는 뜻
쿠키 받기
@CookieValue 어노테이션 사용
헤더에서 값을 받고 싶을 때
Subscription-Id: 123
@GetMapping("/some-api")
public ApiResponse<Void> handle(
@RequestHeader("Subscription-Id") Long subscriptionId
) {
// subscriptionId = "123"
return new ApiResponse<>(200);
}CorsConfig 설정도 피룡하다고함
@Configuration public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000") // 요청 프론트 주소
.allowedMethods("*")
.allowCredentials(true); // 쿠키 허용
}
};
}}
