CORS의 정의
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제.
다음과 같은 경우에 발생 할 수 있다.
- XMLHttpRequest와 Fetch API 호출.
- 웹 폰트(CSS 내 @font-face에서 교차 도메인 폰트 사용 시)
- WebGL 텍스쳐.
- drawImage() (en-US)를 사용해 캔버스에 그린 이미지/비디오 프레임.
- 이미지로부터 추출하는 CSS Shapes.
<내가 이해한 대로>
서버 혹은 클라이언트에서 발생하는 것이 아닌, 브라우저에서 일어나는 문제이다. (크롬, 사파리, 파이어폭스 .. )
우리가 브라우저를 사용할 때, 흔히 쿠키에 데이터가 저장되거나 캐싱으로 데이터를 저장하여 우리의 브라우저 이용정보를 담고 있다.
그래서 엄한일을 당하지 않도록 (해커가 버그주소를 보내거나하여..) 브라우저에서는 SOP라는 것이 같은 출처가 아니면 리소스를 공유하지 못하도록 막고 있다.
*SOP(Same-Origin-Policy) 동일 출처 정책.
SOP덕분에 우리는 해킹서버를 예방할 수 있지만, 인증되지 않은 주소로 정보가 나갈 수가 없어서 애플리케이션 제작시 클라이언트와의 요청 및 응답 과정에서 브라우저의 콘솔창을 확인하면 CORS에러를 만날 수 있게 된다.
CORS는 내가 원하는 주소들을 설정해줌으로써 SOP를 통과할 수 있게한다.
즉, 설정한 주소들은 리소스를 주고 받을 수 있게 된다.
=> 다른 출처간의 리소스를 공유할 수 있도록한다.
(출처는 보내고 받는 웹사이트나 API주소, 리소스는 주고 받는 데이터를 의미한다.)
- Preflighted requests 프리플라이트 요청
HTTP의 Options method를 먼저 보내서, 인증된 주소인지 확인 후 본 요청을 보낸다.
- Simple requests 단순 요청
Preflight 요청없이 바로 요청이 가능한 경우.
HTTP의 GET, POST, HEAD method만 가능하다.
application/x-www-form-urlencoded ,
multipart/form-data,
text/plain 타입만 가능하다.
- Credentialed requests 인증정보를 포함한 요청
토큰처럼 사용자 인증 정보를 담고 있는 경우에는 좀 더 엄격하게 관리된다.
Access-Control-Allow-Credentials: true 여야한다.
Access-Control-Origin 값이 와일드카드(*)일 수 없다. 특정 주소를 지정해주어야한다.
