교차 출처 리소스 공유 :CORS (Cross Origin Resource Sharing)

 

교차 출처 리소스 공유 : CORS 가 뭐예요?

 

- 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려 주는 체제.

 

- 웹은 리소스가 자신의 출처. 즉, 도메인, 프로토콜, 포트와 다를 때, 교차 출처 HTTP 요청을 실행한다.

 

- https://aaaaa.com 의 프론트엔드 자바스크립트 코드가 XMLHttpRequest 를 사용하여 https://aaaaa.com/data.json 을 요청하는 경우를 교차 출처 요청의 예시라고 볼 수 있음.

 

- 보안상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한함. 예를 들어, XMLHttpRequest 와 Fetch API 는 동일 출처 정책을 따름. 

 

- 즉, 이 API 를 사용하는 웹은 자신의 출처와 동일한 리소스만 불러올 수 있으며 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 함.

 

- CORS 는 브라우저와 서버간의 안전한 교차 출처 요청 및 데이터 전송을 지원함. 최신 브라우저는 XMLHttpRequest 또는 Fetch 와 같은 API 에서 CORS 를 사용하여 교차 출처 HTTP 요청의 위험을 완화함.

 

...결론....

- CORS는 도메인, 프로토콜, 포트가 다른 서버의 자원을 요청할 때 생김. 그러나 동일 출처 정책으로 인해 CORS 같은 상황이 발생하면 외부 서버에 요청한 데이터를 브라우저에서 보안 목적으로 차단을 한다. 해당 문제를 해결하려면 response 헤더에

"Access-Control-Allow-Origin"를 추가하든가, 서버 쪽에서 처리를 해 주면 된다. 🧐