Cross-Origin Resource Sharing

예전 express로 브라우저에서 받은 데이터값을 받아오려 했는데 CORS오류가 나서 받지 못했던 경험이 있다. port번호가 달라서 에러가 났는데 그때 cors 라이브러리를 다운받아 요청을 허용해 줬었다.

브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한한다.
그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다.
만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절한다.

이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS(Cross-Origin Resource Sharing)라고 부른다.

cors란?

교차 출처 리소스 공유란 뜻으로 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.
웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.

어떤 요청이 CORS를 사용하는지

• XMLHttpRequest와 Fetch API 호출
• 웹 폰트(CSS 내 @font-face에서 교차 도메인 폰트 사용 시)
• WebGL 텍스쳐
• drawImage를 사용해 캔버스에 그린 이미지 / 비디오 프레임
• 이미지로부터 추출하는 CSS Shapes

CORS의 프로세서

cors는 웹 브라우저에서 해당 정보를 읽는 것이 허용된 출처를 서버에서 설명할 수 있는 새로운 HTTP 헤더를 추가함으로써 동작한다.

서버 데이터에 side effect를 일으킬 수 있는 HTTP 요청 메서드(GET을 제외한)에 대해, CORS 명세는 브라우저가 요청을 options 메서드로 prefilght(사전 전달)하여 지원하는 메서드를 요청하고, 서버의 허가가 떨어지면 실제 요청을 보내도록 요구하고 있다.

CORS 실패가 됐다면?

오류의 원인이지만, 보안상의 이유로 JavaScript에서는 오류의 상세 정보에 접근할 수 없으며, 알 수 있는 것은 오류가 발생했다는 것 뿐.
정확히 어떤 것이 실패했는지 알아내려면 브라우저의 콘솔을 봐야한다.

출처 :
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
CORS란 무엇인가?