CROSS ORIGIN / SAME ORIGIN
이는 HTTP 요청에 대해서 어떤 요청을 하느냐에 따라 각기 다른 특징을 가지고 있기 때문이다.
HTML → 기본적으로 Cross-Origin 정책을 따름
link 태그에서 다른 origin의 css 등의 리소스에 접근하는 것이 가능
img 태그등에서 다른 리소스에 접근하는 것이 가능
XMLHttpRequest, Fetch API 등 script 태그 내 → 기본적으로 Same-Origin 정책을 따름
자바스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한한다. (브라우저 기본 설정은 하나의 서버 연결만 허용)
이 정책을 Same-Origin-Policy라고 한다.
CORS
CORS (Cross-Origin Resource Sharing) <교차&다른 출처 리소스 공유>
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는,
추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제다.
즉, 위에서 시뻘겋게 CORS 어쩌구 에러는 CORS를 허용해서 아무런 탈 없이 다른 출처 리소스 공유를 해달라는 권고 사항 같은 것이라 볼 수 있다.
웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행하게 된다.
#
HTTP 요청에 대해서 HTML은 기본적으로 Cross-Origin 요청이 가능하다. 왜냐하면 HTML은 Cross-Origin 정책을 따르기 때문이다. 예컨데 HTML에서 link 태그에서 다른 origin의 css 등의 리소스에 접근하는 것이 가능하며, img 태그에서 다른 jpg, png 등의 리소스에 접근하는 것이 가능하다. 그러나 script 태그 내에 있는 HTTP 요청(XmlHttpRequest, Fetch Api)에 대해서는 기본적으로 Same-Origin 정책을 따르고 있기 때문에 Cross-Origin 요청이 불가능하다. 그 이유는 보안상의 이슈라고 하는데, 아무리 검색해봐도 안나와서 일단 넘어가도록 하자.