본문 바로가기
Web Programming/이론 공부

CORS

by jaey0ng 2022. 11. 1.

CORS란?

CORS는 Cross-Origin Resource Sharing의 약자로 출처가 다른 자원들을 공유한다는 뜻으로,

한 출처에 있는 데이터를 다른 출처에 있는 데이터에 접근하도록 하는 개념입니다.

즉, 서로 다른 사이트간의 데이터를 주고받기 위해 사용됩니다.

 

 

출처란?

https://example.com:3000/exam/board?no=1#CORS란

위 주소는 설명을 위한 예시주소입니다. 위 주소에서

  • https:// 는 Protocal을 의미합니다.
  • example.com 은 HOST를 의미합니다.
  • :3000 은 Port를 의미합니다. (생략가능)
  • /exam/board 은 Path를 의미합니다.
  • no=1 은 Query String를 의미합니다.
  • #CORS란 은 Fragment를 의미합니다..

위 구성요소 중에서 Protocol + Host + Port가 동일하면 동일 출처(Origin)라고 부릅니다.

 

동일출처 예시

https://example.com
https://example.com:3000
Port 3000이 생략되어있고,
Protocol + Host + Port 가 동일하므로 동일출처 입니다.
https://example.com/exam/board.html
https://example.com/exam2/board.html
Protocol + Host + Port 가 동일하고 Path가 다르므로 동일출처

 

다른출처 예시

http://example.com 
https://example.com
Protocal이 달라서 다른출처입니다.
https://www.example.com
https://example.com
https://example2.com
HOST가 다르므로 다른출처입니다.
https://example.com
https://example.com:8080
Port 3000과 8080은 다르므로 다른출처입니다.

다른 출처의 요청인 경우 CORS 정책에 준수해서 요청해야만 정상 응답이 가능합니다.

 

 

CORS의 필요성

검색중에 궁금한 정보가 들어있는 <script>가 심어진 QnA.com이 있다고 가정합시다.

그 페이지를 열면 <script>가 실행이 되는데 스크립트 명령어가 중요한 정보를 삭제하는 'delete /~~~'를 요청하도록 되어있습니다.

Ajax호출로 ~~~API를 호출하여 중요한 정보를 삭제해버리면 안되기에 CORS 정책이 필요한 것입니다.

 

 

다른출처 요청 정책

  • 단순요청(Simple Request)
  • 프리플라이트 요청(Preflighted Request)
  • 인증정보요청(Credential Request)