JWT 방식으로 로그인 구현하고 있었고,
로그인 시 액세스 토큰은 response body,
리프레시 토큰은 HttpOnly 쿠키에 담겨저서 보내기로 했었습니다.
처음 구현하고 나서는 액세스 토큰만 넘어오고
리프레시 토큰은 쿠키에 저장이 안되가지고 문제를 알아보니
클라이언트와 서버간 withCredential 옵션을 붙여야 하더라구요.
```
final ResponseCookie refreshTokenCookie = ResponseCookie
.from("refreshToken", result.getRefreshToken())
.maxAge(604_800)
.path("/")
.secure(isHttps)
.sameSite(Cookie.SameSite.LAX.name())
.domain(domain)
.httpOnly(true)
.build();
```
```
@Override
public void addCorsMappings(CorsRegistry registry)
{
// Global CORS Setting
registry.addMapping("/**")
.allowedMethods("*")
.allowedHeaders("*")
.allowCredentials(true)
.allowedOrigins("https://example.kr", "https://api.example.kr");
WebMvcConfigurer.super.addCorsMappings(registry);
}
```
근데 저 옵션을 붙이면 CORS 허용해줄 Origin에 대한 설정을 하라는 에러가 떠서
서버쪽에서는 오리진 설정을 위와 같이 한 상태입니다.
저러고 나니까 배포된 사이트에서는 정상적으로 동작하는데,
이번엔 로컬 개발 환경(localhost:3000)에서 맛탱이가 가버렸습니다.
뭐 당연하겠죠 origin에 제 로컬 쪽을 추가 안했으니..
근데 그래서 이걸 proxy로 우회를 하려고
package.json 최하단에 "proxy" : "https://api.example.kr" 으로하고
axios를 아래처럼 설정했습니다.
```
const API_URL = ""
const AT = localStorage.getItem("accessToken");
axios
.get(`${API_URL}/members/myInfo` , {
headers: {
Authorization: `Bearer ${AT}`
}
})
```
근데 이렇게 하니 이상한 에러가 떠가지고 axios로 받아오는 응답을 보면
현재 접속한 페이지의 index.html 정보만 반환되고 있습니다.
궁금한 점
1. 제 상황에서 프록시를 쓰는 게 맞는지? 맞다면 지금처럼 하는 게 맞는지?
2. 아니면 서버에서 origin 요청을 좀 다르게 설정해줘서 해야 하는지?
(그렇다고 와일드카드로 설정해놓으면 httponly 쿠키 송수신에 문제가 생김)
