[보안] CORS 란? CORS 에러란?

프론트엔드 개발을 하다보면 무심코 브라우저단에서 백엔드 서버에 요청을하다가 한번쯤 CORS 에러를 마주해보셨을 것 같습니다.

출처: https://velog.io/@asroq1/에러해결-또-너야-CORS-Error

위 사진처럼 console에 뜨게되는데요. 처음 마주하면 아니 나는 정상적으로 요청했는데?! postman으로 호출하면 잘 호출되던데?! 왜 너는 허락을 안해주는거니?? 하는 마음이 들게됩니다 ㅠㅠ

 

자 오늘은 이 CORS 에러에 대해 간단하게 알아봅시다

---

CORS란?

CORS는 Cross Origin Resource Sharing의 약자인데 직역하면 서로 다른 도메인간에 자원을 공유하는 것을 의미하며 기본적으로 브라우저에서 차단되어있습니다.

 

왜 차단시켜요..?

브라우저는 사실 공격에 굉장이 취약합니다. 누군가 의도적으로 악의적인 자바스크립트를 웹사이트에 심어놓는다면, Client의 의도와는 상관없이 Client로 위장해서 누군가 서버에 접근할 수 있습니다. 이를 방지하기 위해 기본적으로 브라우저에서는 현재 있는 도메인/포트와 다른 곳으로 요청을 보내는 것을 원천적으로 막아놓습니다.

---

CORS 에러 해결방법

헉 그럼클라이언트단에서 api 호출을 못하나요..? 아니죠! 당연히 방법이 있습니다.

 

클라이언트에서 해결

• 가장 간단한 방법은 Proxy 패턴을 이용하는 것입니다. 클라이언트 웹페이지에서 직접 보내는게 아니라, 클라이언트 페이지에서 클라이언트 서버로 요청을 보내고, 클라이언트 서버에서 백엔드 서버로 요청을 보내도록 하는 것입니다. 서버에서 서버끼리 통신할때는 CORS 정책이 적용되지 않기 때문이죠

서버에서 해결

• @CrossOrigin 어노테이션 사용하기: Controller단에서 맵핑 메소드에 @CrossOrigin 어노테이션을 붙이는 것입니다
• CorsFilter 사용하기: 서블릿 필터 인터페이스를 이용하는 것입니다. 서버로 들어오는 모든요청을 우선적으로 가로챈다음 적철한 CORS 정책과 Header를 사용하는 것입니다. Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Expose-Headers 등등이 존재합니다.

 

출처:
- CORS란? CORS를 해결해보자