728x170
해당 글에서는 Swagger UI 내에서 발생한 CORS 에러에 대해 이를 해결하는 방법에 대해 알아봅니다
💡 [참고] CORS에 대한 이해 및 Swagger 활용방법에 대해 궁금하시면 아래의 글을 참고하시면 도움이 됩니다.
분류 | 주제 | 링크 |
CORS 이해 및 활용 | 교차 출처 리소스 공유 : CORS(Cross Origin Resource Sharing) 이해하기 | https://adjh54.tistory.com/586 |
CORS 이해 및 활용 | Spring Boot 환경에서 CORS(Cross Origin Resource Sharing) 이해하고 활용하기 -1 | https://adjh54.tistory.com/587 |
Swagger 활용 | Spring Boot 2.x 환경에서 Swagger 이해하고 적용하기 : SpringDoc openAPI UI | https://adjh54.tistory.com/72 |
Swagger 활용 | Spring Boot 3.x 환경에서 Swagger3 이해하고 적용하기 : SpringDoc OpenAPI Starter WebMVC UI 및 구성 방법 | https://adjh54.tistory.com/561 |
Swagger 활용 | Spring Boot 3.x 환경에서 Swagger3 이해하고 적용하기 -2 : @RequestParam, @PathVariable, @RequestBody, @RequestHeader 정의 방법 | https://adjh54.tistory.com/618 |
1) 문제점
💡 문제점
- 로컬 환경이 아닌 개발 서버 환경에서 아래와 같이 CORS, Network Failure, URL scheme must be "http" or "https" for CORS와 같은 에러가 발생하였습니다.
💡 아래의 증상을 보니, https:// 형태의 Swagger-ui에 접속이 되었으나, 호출은 http:// 형태로 호출이 되는 문제가 발생하였습니다.
- 이와 같이 Swagger UI는 https:// 형태로 구성이 되어 있지만, Swagger UI에서 http:// 형태로 호출을 하기에 동일한 프로토콜이 아니기에 출처가 다른 것으로 간주가 됩니다. (CORS 오류)
💡 Postman을 통해서 직접적인 통신을 했을때는, 문제가 없음을 확인하였습니다.
2) 해결방법
💡 해결방법
- Swagger UI에서는 기본적으로 호스트 URL을 절대 경로로 설정하려는 경향이 있습니다. 이는 Swagger UI가 API 문서를 제공할 때 명확한 endpoint를 지정하기 위한 것입니다.
- 특히 OpenAPI(Swagger) 3.0 스펙에서는 servers 배열을 통해 API 서버의 기본 URL을 지정하게 되어있는데, 이 설정이 없으면 Swagger UI는 현재 호스트의 루트 URL을 사용하려고 시도합니다.
- 이로 인해 https 환경에서 http로 요청을 보내는 등의 CORS 문제가 발생할 수 있으므로, 상대경로('/')를 명시적으로 설정하여 이러한 문제를 예방하는 것이 좋습니다.
1. 해결 방법 1 : addServersItem() 메서드 추가
💡 addServersItem() 메서드 추가
- Swagger UI의 서버 URL 설정을 상대 경로로 지정하는 역할을 합니다. 이렇게 하면 Swagger UI가 현재 호스트의 프로토콜(http/https)을 자동으로 따르게 됩니다.
- 문제의 원인을 보면, https로 접속된 Swagger UI에서 API를 http로 호출하려고 해서 CORS 오류가 발생했습니다.
- 상대 경로('/')를 사용함으로써, Swagger UI는 현재 페이지와 동일한 프로토콜(https)을 사용하여 API를 호출하게 되므로 CORS 문제가 해결됩니다.
import io.swagger.v3.oas.models.Components;
import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.info.Info;
import io.swagger.v3.oas.models.servers.Server;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
/**
* Swagger springdoc-ui 구성 파일
*/
@Configuration
public class OpenApiConfig {
@Bean
public OpenAPI openAPI() {
Info info = new Info()
.title("API Document")
.version("v0.0.1")
.description("API 명세서입니다.")
return new OpenAPI()
.components(new Components())
.addServersItem(new Server().url("/")) // 추가
.info(info);
}
}
2. 해결 방법 2 : @OpenAPIDefinition 어노테이션 추가
💡 해결 방법 2 : @OpenAPIDefinition 어노테이션 추가
- 해당 어노테이션 내에 @Server 어노테이션으로 url=”/” 속성으로 설정하였습니다.
- 해당 방법을 적용하면 상대 경로를 사용하여 현재 호스트의 프로토콜(http/https)을 자동으로 따르게 됩니다.
- Swagger UI가 API를 호출할 때 현재 페이지와 동일한 프로토콜을 사용하게 되어 CORS 문제를 방지할 수 있습니다
import io.swagger.v3.oas.annotations.OpenAPIDefinition;
import io.swagger.v3.oas.annotations.servers.Server;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@OpenAPIDefinition(servers = {@Server(url = "/", description = "Default Server URL")}) // 추가
public class TestApiApplication {
public static void main(String[] args) {
SpringApplication.run(TestApiApplication.class, args);
}
}
3) 결과 확인
💡 결과 확인
- 아래와 같은 형태로 default Servers URL이 “/”로 변경이 되었습니다.
💡 직접 호출을 하였을때, https:// 형태로 API 호출이 정상적으로 수행됨을 확인하였습니다.
오늘도 감사합니다. 😀
그리드형