[Thouble Shooting] CORS

 

 

배경

---

 

MSA환경에서 개발을 진행하는데 각 서비스별로 기능 명세서를 만들고 싶었고, 

 

각각의 서비스에서는 해당 서비스 포트로 접속 시 문제가 없었으나 

 

Gateway에서 모든 서비스들을 조회하기 위해 코드를 구현하였음. 

 

 

이슈

---

 

CORS 문제로 인해 각 서비스의 API요청이 실행이 정상적으로 안됌. 

 

 

원인 

---

 

스프링 MSA 구조에서는 Swagger를 게이트웨이에서 한 번에 보고 싶을 때 게이트웨이의 swagger.ui-html은 8080포트이거나 따로 설정한 포트에서 열린다. 

 

그런데 Swagger UI가 내부적으로 각 서비스의 OpenAPI문서(v3/api-docs)를 직접 요청하는 현상이다. 

 

Swagger UI (http://localhost:8080)
 ↓
요청 → http://localhost:20000/v3/api-docs   (user-service)
요청 → http://localhost:20001/v3/api-docs   (order-service)

 

브라우저 입장에서 보면 다른 포트로 요청을 보내는 Cross-Origin 요청이 된다. 

 

 

문제

---

 

브라우저는 보안 정책(Same-Origin Policy) 때문에 기본적으로 "출처(Origin)"가 다른 요청을 차단합니다. 

 

게이트웨이의 Swagger UI는 http://localhost:8080이고, 각 서비스는 http://localhost:20000, 20100 이라서 서로 다른 Origin이다. 

 

이때 서버가 Access-Control-Allow-Origin 헤더를 제대로 내려주지 않으면 Swagger UI는 "Failed to fetch... Possible CORS issue?" 라고 뜬다. 

 

Swagger UI는 JS로 동작하기 때문에 브라우저 보안 정책을 그대로 받는다고 한다. 

즉, 서버 쪽(Spring Boot)이 CORS 허용을 명시적으로 해줘야 한다. 

 

 

해결방안

---

 

공통 Swagger 설정 모듈에 CORS 허용 설정 추가 

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOriginPatterns("*")  // ✅ allowedOrigins("*") 대신 사용
                    .allowedMethods("*")
                    .allowedHeaders("*")
                    .allowCredentials(true);
        }
    };
}

 

해당 설정이 각 서비스에 자동 적용되어 게이트웨이의 Swagger UI가 모든 서비스 문서를 문제 없이 불러올 수 있게 된다. 

 

 

결과 

---

 

 

 

게이트웨이의 Swagger UI에서 모든 서비스 문서를 한 화면에서 정상 로딩된다. 

 

 

요약

---

문제

게이트웨이(8080) -> 각 서비스(20000등)로 v3/api-docs 요청 시 다른 Origin으로 인식되어 Swagger UI에서 CORS에러 발생

 

원인

브라우저의 Same-Origin Policy -> 서버에서 Access-Control-Allow-Origin 헤더가 내려가지 않음

 

해결 방법

공통 Swagger 설정 모듈에 CORS허용 설정 추가