Spring boot : interceptor 탈 때 CORS 이슈 해결

FrontEnd - BackEnd가 분리 되어 있고 현재 front에서 SpringBoot로 만들어진 Rest API 를 호출할 때 아래와 같은 에러가 발생했다. 

front에서 spring boot rest api 호출

프론트 쪽에서 요청할 때 코드이다. header에 추가 적인 정보도 담아서 POST 방식으로 함께 요청하고 있다. (Chrome)

개발자 도구 켰을 때 뜨는 에러 창

파파고로 해석 돌려보니 대충 이런 내용이었다 >>>  출발지 'http://localhost:8070/*****'에서 'http://localhost'로 가져오는 액세스가 CORS 정책에 의해 차단되었습니다. 사전편람 요청에 대한 응답이 액세스 제어 검사를 통과하지 않음: 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 불투명 응답이 필요에 따라 제공되는 경우 요청의 모드를 'no-cors'로 설정하여 CORS가 사용되지 않도록 리소스를 가져옵니다.

• CORS(Cross-Origin Resource Sharing)는 무엇? 브라우저에서 보안적인 이유로 cross-origin  HTTP 요청들을 제한한다. cross-origin 요청을 하려면 서버의 동의가 필요하다. 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절한다.

CORS는 한국어로 해석하면 교차 출처 리소스 공유이다. 교차 출처 리소스를 왜 공유해야 하는걸까? 자바스크립트는 보안상으로 SOP(Same Origin Policy) 즉 동일 출처 정책 보안 규칙을 따르고 있다. 

• SOP(Same-Origin Policy)를 따르는 이유는? 웹사이트가 서로 공격하는 것을 목표로 하는 웹 브라우저 보안 메커니즘이다. 출처(Origin)가 동일한(Same) 자원들만 상호작용이 가능하도록 하는 것인데, 한 출처의 스크립트가 다른 출처의 데이터에 액세스 하지 못하도록 제한함으로써, 악성 웹사이트를 방문하게 될 시에 나의 데이터를 보호하도록 해준다. ( 더 자세한 설명은 아래의 출처 참고글에서 확인 할 수 있다.) 

출처는 URL로 보면 된다. URL은  Protocol, Host, Port, Path ... 로 이루어져 이루어져있다. CORS 이슈는 Protocol, Host, Port중에서 하나라도 다르면 발생하게 된다. (나의 경우.. 프론트 쪽에서 사용하는 URL은 http://localhost:80인데 호출하는 REST API URL이 http://localhost:8070으로 포트가 80과 8070으로 달라서 이슈가 발생했다.) 

어떻게 해결 해야 하나...? ㅠㅠ

반응형

CORS 이슈의 경우,  아래와 그림과 같은 원리로 발생하게 된다. 

HTTP 프로토콜 통신

1) 웹은 HTTP 프로토콜을 이용해서 서버에 요청을 보내게 된다. 이때 클라이언트는 HTTP 요청 헤더에 Origin을 담아서 전달하게 된다. 현재 출처(http://localhost/) 전달. 

2) 이후 서버가 요청에 대한 응답을 할 때 응답 헤더에다가 Access-Control-Allow-Origin 이라는 필드를 추가한뒤 접근이 허용된 출처 url을 담아서 보내준다. (혹은 출처url 뭐든 다 허용하고 싶으면 "*" 별표 보내주면 전체 허용이다.)

3)  이후 클라이언트로 돌아와서, HTTP 요청 헤더에 Origin과 서버응답 헤더의 Access-Control-Allow-Origin를 비교해서 허용되지 않았을 경우 CORS 이슈 발생, 허용 되었을 경우 성공적인 응답을 준다. 

따라서 SpringBoot로 만들어진 Rest API 환경에서 응답헤더에 Access-Control-Allow-Origin 허용할 값을 추가하여 응답처리 되도록 해주면 되는 것이었다. 

구글링 해보니, 방법이 또 3가지 정도 있었다. 

1. Filter 인터페이스를 상속받은 Cors처리 필터 클래스를 만들어 HTTP 서버 응답 전에 헤더 값을 추가하여 보내준다.

2. 컨트롤러에서 @CrossOrigin 어노테이션 사용한다.

3. WebMvcConfigurer에서 설정하거나, @Configuration을 허용한 클래스에서 addCorsMappings 메서드를 오버라이드 하여 구현해준다.

이 중에서 현재 개발 되어 있는 코드는 header 값을 검증하도록 되어 있는 쪽에서 Interceptor를 타도록 되어 있고, WebRequestInterceptor를 상속받아 내부 함수를 오버라이드 하여 사용해주고 있으므로 최대한 레거시 코드를 유지하기 위해...1번.. Filter를 사용하는 것으로 선택했다. 

아래는 Filter에 대한 설명.

출처 : https://yhmane.tistory.com/144

설명 너무 잘해놓으셔서 감사.. 

 

아래는 참고글 CORS (교차 출처 리소스 공유),SOP(Same-Origin Policy)

https://portswigger.net/web-security/cors/same-origin-policy

Same-origin policy (SOP) | Web Security Academy

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

동일 출처 정책 - 웹 보안 | MDN

https://hannut91.github.io/blogs/infra/cors

CORS란 무엇인가? – 한윤석 개발 블로그

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏

https://wonit.tistory.com/572

[Spring Boot] CORS 를 해결하는 3가지 방법 (Filter, @CrossOrigin, WebMvcConfigurer)

https://yhmane.tistory.com/144