이건 기본적으로,
Cross Origin 정책 해서,
Origin이 다른 곳 끼리도 통신이 가능하게끔 한다는 거임.
원래 보안상의 이유로 같은 도메인 루트만, 그러니가 aaa.com이 루트 도메인이면 api.aaa.com과 app.aaa.com 이 둘만 통신 가능하게끔 하고 싶었는데,
워낙 다른 도메인끼리 주고받는건 흔한 일이라 그걸 막을 순 없음.
그래서 어느정도 제약을 거는거임.
일단은, 이거 하려면 (쿠키만 이었나?)
프론트엔드 쪽에서도 Credentials 이거 true? include? 해 줘야 함.
저게 뭐 인증정보까지 가져온다는 그런거임. 같은 도메인 족보이면 그냥 서버에서 하고 말텐데, 이건 인증정보까지 가지고 와야 하나 봄.
그리고 서버에서,
일단 그래도 인증관련이라,
ResponseCookie.ResponseCookieBuilder cookieBuilder = from(SESSION_COOKIE_NAME, sessionId);
cookieBuilder.maxAge(maxAgeSeconds);
cookieBuilder.secure(true);
cookieBuilder.sameSite("None");
cookieBuilder.path("/");
cookieBuilder.httpOnly(true);
cookieBuilder.domain(SESSION_COOKIE_DOMAIN);이렇게 sameSite none이 같은 사이트 족보 아님 그거고
path가 저렇게 최상위로 해야, naver/member 등 어느 하위루트 가도 다 적용됨.
만약 저게 /member 이렇게 되어 있으면 /member 및 /member 하위만.
그리고 cors는 secure도 필수임.
httpOnly는 저거 true면 이제 javascript에서 저 쿠키를 못 건드림.
domain은 응답할 서버쪽 도메인을 넣는거임.
클라이언트 쪽에서 저 도메인 쪽으로 연결할 때 찝어서 보냄.
그리고,
응답으로 이렇게도 보내줘야 함.
필요에 따라 Allow-Method도. GET, POST 등 하면 됨.
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("https://post-react.onrender.com")
.allowCredentials(true)
.allowedMethods("GET", "POST", "OPTIONS")
.allowedHeaders("*");
}
근데 여기서 좀 헷갈릴 수 있는게,
응답헤더에 넣는건 https 프로토콜까지, 쿠키는 프로토콜 빼고.
origin이 저기 근원지 허용하는거고,
credentials 저게 중요한데 인증정보? 같은 거 서로 통신하게끔 허용하는 거임. 서로 주고 받을 수 있게끔.
Authorization이 credentials 을 인식하는 거라고 했었나?
allowedHeaders는 그러니까 허락할 헤더? 요청의 헤더 중 허락할 헤더를 고르는 거임.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
이런 거 나오면 저기에 안 넣어줘서 그럼.
여튼 이거, 생각보다 Network보면 어떤 에러인지 잘 나와있음. 그거 보면서 해결하면 됨.
참고로 저 위에 Cors 저거 응답마다 일일이 res.setHaeder("Access-Controll-Allow......", )
등 해서 넣어줄 수도 있음.