본문으로 바로가기

[Swagger] Springdoc-openapi Cors 에러 해결 방법

category Spring 2023. 7. 16. 21:18

에러

 

  • 에러 내용
    • CORS
    • Network Failure
    • URL scheme must be "http" or "https" for CORS request

원인

 

결론부터 말하면

Swagger-ui URL주소와 Request URL주소가 다르다. 

😭

 

정확히 나의 경우에는 포트가 달랐다.

왜냐하면 MSA gateway 포트로 Swagger-ui 를 들어갔기 때문.

 

예를들면

  • Spring Cloud Gateway port : 9999번 
  • Springboot API port : 1234번
  • Swagger
    • Swagger-UI  URL : http://127.123.123.123:9999/swagger-ui/index.html
    • Request URL : http://127.123.123.123:1234/users

이렇게 Swagger-UI URl과 Request URL 이 달라지는 이유는 아래와 같다.

 

Generated server url 부분을 확인해보면

Swagger-ui URL 과 다른 것을 확인할 수 있다. 

Generated server url 은 서버의 IP와 PORT 를 가져오게 되어 있다. 

 

즉 Swagger-ui URL을 어떤 주소로 들어가던지

서버의 IP, PORT 가 Request URL 이 된다는 것!!!

 


해결

 

springdoc-openapi (swagger) 에서

해당 CORS 오류를 피하려면 Default Server URL 을 지정해주어야 한다.

@OpenAPIDefinition( 
    servers = {
       @Server(url = "/", description = "Default Server URL")
    }
)

(prefix가 존재하면 넣어주자)

 

이렇게 설정을 하고 확인해보면

Default Server URL로 변경된 것을 확인할 수 있다. 

 

후기

 

Generated Server URL 보다

Default Server URL 설정이 default 값이었다면 

사용자가 더욱 편리하지 않았을까 생각이 든다. 

물론 이건 단순한 나의 생각이겠지. 

 

소스코드가 아닌 환경설정으로 빼고 싶었으나 아직 방법을 찾지 못했다. 

혹시나 아신다면 댓글 달아주시면 감사하겠습니다!

 

 

 

추가 CORS 설명 (by. chatgpt)

 

Spring Boot에서 springdoc-ui를 사용할 때, default server URL을 설정하지 않으면 CORS(Cross-Origin Resource Sharing) 에러가 발생하는 이유는 다음과 같습니다.

springdoc-ui는 Swagger UI를 기반으로 한 API 문서화 도구입니다. Swagger UI는 클라이언트에서 API 문서를 시각적으로 표시하기 위해 JavaScript 기반으로 동작하는 웹 애플리케이션입니다.

웹 브라우저는 보안상의 이유로 동일 출처 정책(Same-Origin Policy)를 적용합니다. 이 정책은 브라우저가 스크립트로 다른 도메인, 포트, 프로토콜로부터 리소스를 요청할 때 제한을 두는 보안 메커니즘입니다. 즉, 서로 다른 출처의 리소스에 접근하는 경우, 해당 리소스는 특별한 조치를 취하지 않는 한 브라우저에서 차단됩니다.

API 문서를 포함하는 springdoc-ui는 JavaScript를 사용하여 API 정의를 가져오고 표시합니다. 이 과정에서 Swagger UI는 API 정의를 요청하는데, 만약 default server URL이 설정되지 않았다면, 브라우저는 다른 도메인으로부터의 API 정의 요청을 차단합니다. 따라서 CORS 에러가 발생하게 됩니다.

default server URL을 설정하면, Swagger UI는 해당 URL을 기반으로 API 정의를 가져오기 때문에 동일 출처 정책에 위배되지 않습니다. 서버 URL을 설정함으로써 Swagger UI는 명시적으로 허용된 도메인과 포트에 대한 접근을 허용하게 되어 CORS 에러를 방지할 수 있습니다.