교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다.
cross-origin 이란 이들 중 한가지라도 다른 경우를 의미한다.
protocol : 프로토콜이 다른 경우이다. ex. http != https
domain : 도메인 이름이 다른 경우이다. ex. domain.com != domain2.com
port : 예를 들어서 현재 장고 앱이 8000번 포트를 사용한다고 하면, 리액트 앱이 3000번 포트를 사용하므로 같은 ip 라고 하더라도 cross-origin 에 해당하게 된다.
Same Origin :
사용자가 브라우저에서 https://www.example.com에 접속한다고 가정해봅시다. 해당 페이지에서 JavaScript 코드가 실행됩니다. 이 페이지에서 로드된 스크립트가 다른 리소스에 접근하려고 할 때, SOP는 동일한 출처를 가진 리소스에만 접근을 허용합니다. 따라서, https://www.example.com 도메인에서 로드된 스크립트는 https://www.example.com/images/logo.png와 같은 리소스에 접근할 수 있습니다. 이는 SOP가 동일한 출처에서의 상호작용을 허용한다는 예입니다.
Cross Origin :
동일한 출처를 가지지 않는 리소스에 접근하는 경우를 살펴보겠습니다. 사용자가 브라우저에서 https://www.example.com에 접속하고, 해당 페이지에서 로드된 스크립트가 https://api.example.net/data와 같은 다른 도메인의 API에 접근하려고 한다고 가정해봅시다. 이 경우, SOP에 따라 브라우저는 이 요청을 차단합니다. 왜냐하면 출처가 다르기 때문에 SOP에 의해 허용되지 않는 상호작용이기 때문입니다.


SOP 는 Same Origin Policy 인데
CORS에 Cross Origin ... 과 반대 개념이라는 것을 알 수 있다
Same Origin <-> Cross Origin
-> SOP는 동일한 Origin 인 놈들끼리만 리소스를 공유할 수 있다! 라는 정책이다.
그렇다면 이 SOP가 필요한 이유가 뭘까?