[WEB] CORS에 대하여

실무에서 프론트 개발을 하다보면 가장 자주보게 되는 에러는 CORS이다.

 

CORS 관련 문제가 발생한 화면

입사한지 얼마 안됐을 때, 이 에러가 발생하면 숨이 턱턱 막혔다. 또 이 에러야? 하면서 다시 구글에 CORS를 쳐보면서 해결 방법을 찾아보기 시작했다. 그래서 이제는 여기에 제대로 정리해보려고 한다.

 

 

CORS란?

Cross-Origin Resource Sharing

시스템 수준에서 타 도메인 간 자원(img, data) 호출을 승인/차단을 결정하는 것.

 

다른 도메인으로부터 리소스가 요청될 경우, 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다.

보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한한다.(이를 Same-Origin-Policy라고 한다.)

개발자들은 웹 애플리케이션을 개선시키기 위해 XMLHttpRequest가 cross-domain 요청을 할 수 있도록 요청함.

이에 따라 W3C에서는 CORS 메커니즘을 제안했다.

 

 

동작과정

웹 브라우저가 사용하는 정보를 읽을 수 있도록 허가된 출처 집합을 서버에게 알려주도록 허용하는 특정 HTTP 헤더를 추가한다.

 

 

서버/클라이언트 별 CORS 처리 방법

(1) Server side

- 서버에서 CORS 요청이 허용되도록 구현(API 서버에 직접 접근할 수 있는 경우에 주로 사용하는 방법)

 

예) controller.java 파일 > @CrossOrigin(origins=”*”, maxAge=3600)

> 모든 주소에 대해 접근 허용하며, 허용 시간은 3600초.

 

참고 사이트

https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

CORS support in Spring Framework

(2) Client side

- 사용자가 직접 웹 브라우저 실행 옵션을 변경하거나 플러그인을 설치. => 하지만 사용자에게 이런 책임을 전가하는건 좋지 않다.

- jsonp 방식으로 요청 (주로 다른 사이트에서 제공하는 API 호출할 때 사용)