CORS 에러란?
프론트엔드와 백엔드 개발을 따로 진행하다 합치는 과정에서 빈번하게 만날 수 있는 오류 중 하나가 CORS 오류인 것 같습니다.
아마 높은 확률로 프론트엔드에서 백엔드 서버쪽으로 요청을 보냈는데 CORS 오류라며 요청에 대한 결과물을 제대로 보여주지 않을 건데 이 CORS 오류라는 것은 Cross Origin Resource Sharing 의 약자로 동일출처가 아니라서 발생하는 에러 입니다.
동일출처
웹페이지의 리소스가 로드 된 위치인 출처(origin)의 도메인 주소, 프로토콜, 포트가 모두 같은 경우를 말합니다.
예를들어 서버의 도메인이 www.abctest.com이고 HTTP프로토콜을 사용하며 포트번호가 80이라면 클라이언트에서 요청을 보내는 도메인, 프로토콜, 포트번호는 이와 동일해야 합니다.
그런데 테스트 환경이라면 보통 클라이언트의 포트는
localhost3000이렇게 30 포트를 사용하고 서버쪽은
localhost:8080이렇게 80포트를 사용하여 포트가 다르기 때문에 발생하는 경우가 많습니다.
CORS 에러를 해결하는 방법
클라이언트에서 해결하는 방법이 있고 서버에서 해결하는 방법이 있습니다.
클라이언트
브라우저의 실행 옵션이나 플러그인을 통해서 동일 출처관련 정책을 회피하는 방법이 있습니다.
또는 jsonp 방식으로 json을 가져오는 건데 css파일이나 js파일은 CORS영향을 받지 않고 가져올 수 있습니다. 그래서 js파일을 가져와서 해당 파일을 json 형태로 파싱할 수 있겠습니다.
서버
컨트롤러 클래스 또는 메서드 단위로 @CrossOrigin 어노테이션을 붙여주는 방법이 있습니다. 저는 개인적으로 해당 방법을 잘 사용하진 않지만, 사용한다면 주로 컨트롤러에 사용하는 편 입니다.
또는 CorsFilter사용하는 방법이 있습니다.
@Component 어노테이션으로 Filter 클래스를 implements 하여 cors 설정을 직접 세팅하는 방법 입니다.
예를들면 이런식 입니다. "*" 으로 표시된 것은 와일드카드라고 해서 모든 도메인을 허용하겠단 뜻인데 보안상 별로 좋지 않고 일부 포스팅에 따르면 CRUD 기능을 한정적으로 제공한다는 글을 본 것 같아서 추천드리지 않습니다. 허용하고자 하는 도메인을 직접 언급해주는 것이 좋습니다.
만약 Spring Security를 사용하신다면 SecurityConfigurer 클래스에서 Cors 관련 설정을 해줄 수 있습니다.
저의 경우 SecurityConfiguration 클래스를 만들고 SecurityFilterChan을 Bean 으로 등록하여 http 설정을 따로 해주었습니다.
여기서 corsConfigurationSource()는 따로 만들어서 Bean으로 등록한 메서드 입니다.
여기서 중요한 부분은 SecurityFilterChan의 http 설정에서 cors() 관련 설정에
configurationSource 를 사용하여 미리 Bean 으로 등록해둔 Cors 설정값을 사용해야한다는 부분 입니다.
그 외에는 Component 설정과 비슷하게 진행하면 됩니다.