-
Cross Origin Resource Sharing의 약자
-
우리가 가져오는 리소스들이 안전한지 검사하는 관문이다.
-
이는 HTTP 요청에 대해 어떤 요청을 하느냐에 따라 각기 다른 특징을 가진다.
- HTML -> 기본적으로 Cross-Origin 정책을 따른다.
- link 태그에서 다른 origin의 css등의 리소스에 접근 가능
- img 태그에서 다른 리소스에 접근 가능
- XMLHttpRequest, FetchAPI 등 script 태그 내 -> 기본적으로 Same-Origin 정책을 따름
- 자바스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한한다.
- 브라우저 기본 설정은 하나의 서버 연결만 허용한다.
- 이 정책을 Same-Origin-Policy 라고 한다.
- 출처(Origin)는 아래의 Protocol, Host, Port까지 모두 합친것을 의미한다.

🔗 출처
-
SOP (Same-Origin-Policy) 동일 출처 정책:
-
즉, 프로토콜, 포트, 호스트 중 하나라도 일치하지 않으면 Cross Origin이다.
-
CORS 동작 과정
- 클라이언트에서 HTTP요청의 헤더에 Origin을 담아 전달한다.
- 서버는 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달한다.
- 클라이언트에서, 자신이 보냈던 요청의 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교한다.