CORS

우선, cors는 에러가 아니다.
요청의 옵션 혹은 상태라 볼수있다.

CORS 는 동일 출처 정책(same-origin policy) 기준에 위반된
protocol / host / port가 다를경우, 확장된 형태로 요청될 뿐이다.

동일 출처 정책(same-origin policy) 기준

URL	결과	이유
http://store.company.com/dir2/other.html	성공	경로만 다름
http://store.company.com/dir/inner/another.html	성공	경로만 다름
https://store.company.com/secure.html	실패	protocol 다름
http://store.company.com:81/dir/etc.html	실패	port가 다름 (http = 80, https = 443)
http://news.company.com/dir/other.html	실패	host 다름

CORS 가 적용되는 대상

교차 출처 공유 표준은 다음과 같은 경우에 사이트간 HTTP 요청을 허용합니다.

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

비동기 통신의 흐름

일반적으로 ajax나 axios 를 통해 비동기 통신을 요청하게 되는경우,
내부적으로 XHR 로 통신을 하게된다.
es6(EcmaScript 2015) 의 신규 데이터 통신 api 인 fetch() 를 사용하는 경우도
CORS 관련 처리에 영향을 받게된다.

동일 출처(same origin)

교차 출처(CORS)

CORS 일때, preflight를 보내게 되는데 일종의 핑과 같이
서버의 응답 헤더가 CORS에 대응 되어있는지 확인하는 부분이다.

만약 처리되지 않았다면 이후의 처리는 browser에서 차단된다.

구조의 이해가 어려운 경우

이 처럼 통신의 흐름이 js에서 server로 직접 통신되는 것으로 생각할때,
CORS 에 대한 이해가 많이 혼동이 오게되었다.
프로세스 레이어는 js - server가 아닌 js - browser - server 의 형태이다.

CORS 대응

header 에 CORS 설정값 전달

위 흐름에서 보듯이 CORS에 대한 응답을 해결해줄 수 있는 영역은
오직 서버에서의 처리뿐이다.

이에 서버 구성별로 차이가 있지만
header에 CORS에 관한 설정값을 전달하면 해결이 된다.

proxy 서버 사용

프로젝트 중 pdf 파일 요청을 처리하는게 회사 정책으로 인해 CORS 설정이 불가하여
media 서버(http://aServer.com) -> web 서버 -> javascript 의 형태로 blob 파일을 전달받아 해결하였다.

구조는 위 흐름을 다시 보면 CORS에 대한 정책은
브라우저의 로우레벨에서 처리되는 영역이다.
즉, 아래처럼 CORS가 발생한 URL을 same-origin을 통해 전달받으면 된다.

이렇게되면 서버간 통신이기에 CORS라 하더라도 통신자체는
문제가 없는것이라 데이터를 정상 수신/처리하게 된다.

참조
https://ko.javascript.info/fetch-crossorigin
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://evan-moon.github.io/2020/05/21/about-cors/