[Error] [OAuth2.0구현 과정에 발생한 문제] 쿠키가 공유가 안 되요! CORS, Domain문제

OAuth2.0 인증까지 완료하고 리다이렉트후 클라이언트에서 인증관련 토큰 정보가 확인이 안 되는 문제다. 

 

 

 

✅ CORS란?

=Cors Origin Resource Sharing(교차 출처 리소스 공유)의 약자

추가 HTTP헤더를 사용하여 서로 다른 출처(도메인, 프로토콜, 포트)에 있는 웹 페이지나 서버가 서로 다른 자원에 접근할 수 있도록 허용하는 보안 메커니즘이다. 

 

도메인, 프로토콜, 포트 예시 

• 프로토콜 =>  HTTPS, HTTP
• 포트 => 8080, 80
• 도메인  => www.naver.com  

 

 

CORS는 브라우저가 임의의 웹 페이지에 다른 웹 페이지의 자원에 무분별하게 접근하는 것을 막아 XSS(Cross-site Scripting)와 같은 보안 위협으로부터 웹페이지를 보안한다.
기본적으로 모든 브라우저는 같은 정책을 따르는데, "해당 페이지와 같은 출처의 리소스에만 접근 가능하다."

따라서 다른 출처로부터 자원을 요청하려면  CORS헤더를 넣어줘야한다.

 

 

"도메인, 프로토콜, 포트가 다른데 리소스에 접근이 필요하다면 CORS 헤더를 설정해주자!"

 

단! 도메인이 아예 다르면 접근 불가능 www.naver.com   - api.naver.com  CORS헤더 설정으로 접근 가능 

www.naver.com  - api.google.com CORS설정을 해도 접근 불가능 

 

자세한건 아래 포스팅을 참고하자. 

https://whdudev.tistory.com/27

[OAuth2.0] [Errror] 서로 다른 도메인간 쿠키 공유

 

 

 

 

 

✅ CORS작동 원리 

Access-Control-Allow-Origin은 CORS에서 사용되는 HTTP 응답 헤더 중 하나로, 다른 도메인에서의 요청을 허용하는 경우 어떤 도메인에서 요청을 허용할 것인지를 명시합니다.
스프링기준 설정법 : WebMvcConfigurer(전역설정),@CrossOrigin(개별 컨트럴러),CorsFilter(커스텀)

 

 

브라우저가 다른 출처의 리소스에 접근하려고 시도하면, 브라우저는 요청 헤더에 "Origin" 필드를 포함하여 요청을 보낸다. "Origin" 필드에는 요청을 보낸 웹 페이지의 출처 정보가 담긴다.

 

서버는 요청을 받고, "Origin" 필드를 확인하여 요청이 허용되는 출처인지 판단한다.

허용된 출처라면 응답 헤더에 "Access-Control-Allow-Origin" 헤더를 포함하여 클라이언트에게 알린다. 이 헤더에는 허용된 출처의 목록이 포함되며, "*"는 모든 출처를 허용한다는 뜻이다.

 

브라우저는 서버의 응답을 받아 "Access-Control-Allow-Origin" 헤더를 확인한다. 요청을 보낸 출처가 허용 목록에 포함되어 있으면 응답을 처리하고, 그렇지 않으면 거부한다.

 

 

 

 

✅ CORS설정하는 법

 

일단 필자의 프로젝트에서는 api.*.com(서버)과 www.*.com(클라이언트)로 서로 다른 도메인을 가지고 
Https통신을 하며  서버에는 ec2내부에 Nginx를 두어서 HTTPS설정을 했고 스프링부트 애플리케이션도 같은 ec2에서 실행중이다. 

 

Spring Boot에서 CORS 설정을 한다는 것은 결과적으로 HTTP 응답 헤더에 Access-Control-Allow-Origin을 포함시키는 과정이다.

 

 

CORS 허용 

@Configuration
public class CorsMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry corsRegistry) {
        corsRegistry.addMapping("/**")
                .allowedOrigins("https://*:3000", "https://www.*.shop") // 정확한 도메인 지정
                .allowedMethods("*") // 모든 HTTP 메서드 허용
                .allowedHeaders("*") // 모든 헤더 허용
                .allowCredentials(true) // ✅ 쿠키 전송 허용 (allowedOrigins("*")와 함께 사용 불가)
                .exposedHeaders("Authorization", "Set-Cookie"); // ✅ 클라이언트가 Authorization 헤더 받을 수 있도록 허용
    }
}

 

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {


        http
                .cors(corsCustomizer -> corsCustomizer.configurationSource(new CorsConfigurationSource() {

                    @Override
                    public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {

                        CorsConfiguration configuration = new CorsConfiguration();

                        configuration.setAllowedOrigins(Arrays.asList(
                                "https://*:3000",
                                "https://www.*.shop"
                        ));
                        configuration.setAllowedMethods(Collections.singletonList("*"));
                        configuration.setAllowCredentials(true); // ✅ 쿠키 전송 허용
                        configuration.setAllowedHeaders(Collections.singletonList("*"));
                        configuration.setExposedHeaders(Arrays.asList("Set-Cookie", "Authorization"));
                        configuration.setMaxAge(3600L); // 1시간 캐시


                        return configuration;
                    }
                }));
                
                
     }

 

쿠키 설정 

 

쿠키에도 도메인과 Path가 있이서 설정해줘야함.

   private Cookie createCookie(String key, String value) {

        Cookie cookie = new Cookie(key, value);
        cookie.setMaxAge(60 * 60 * 60 * 60);


        cookie.setSecure(true); // 로컬 개발 환경에서는 Secure=false

        // Secure=false → 쿠키가 HTTP와 HTTPS 둘 다 전송됨 클라가 Https일때는 true
        // HTTPS가 아닐 때도 테스트할 수 있도록 설정

        cookie.setDomain("*.shop"); // 서브도메인 간 공유

        cookie.setHttpOnly(true);

        // CORS 문제 해결 (리디렉션 후에도 쿠키 유지)
        cookie.setAttribute("SameSite", "None");
        cookie.setPath("/");


        return cookie;
    }

yml

server:
  servlet:
    session:
      cookie:
        secure: true
        samesite: None

Nginx 설정 

        # ✅ CORS 설정 (쿠키 포함 허용)
        add_header Access-Control-Allow-Origin $origin always;
        add_header Access-Control-Allow-Credentials true always;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Authorization, Content-Type, X-Requested-With, Set-Cookie" always;

        # ✅ 쿠키 유지
        proxy_pass_header Set-Cookie;
        proxy_cookie_path / "/; Secure;  HttpOnly; SameSite=None Domain=.*.shop";

 

 

 

 

 

✅  출처

 

https://namu.wiki/w/CORS

CORS

https://docs.tosspayments.com/resources/glossary/cors

CORS(교차 출처 리소스 공유) | 토스페이먼츠 개발자센터

https://duklook.tistory.com/209

[단순용어] CORS 와 Access-Control-Allow-Origin