CDN(컨텐츠 전달 네트워크) / CORS(교차 출처 리소스 공유)

 

📌 CDN (Content Delivery Network)

: 전 세계에 분산된 서버 네트워크로 구성되어 사용자에게 빠르고 효율적으로 콘텐츠를 전달하는 시스템

• 최종 사용자와 가까운 곳에 콘텐츠를 캐시하는 지리적으로 분산된 서버 그룹
• 서버들은 데이터의 중복 복사본들을 저장하여, 서버가 최종 사용자와 가장 가까운 서버를 기준으로 데이터 요청을 처리한다. 
• CDN을 사용하면 HTML 페이지, JavaScript 파일, CSS 파일, 이미지, 동영상 등 인터넷 콘텐츠를 로드하는 데 필요한 자산을 빠르게 전송할 수 있다.

 

장점 👍

• 웹사이트 로드 시간 개선
  대부분의 CDN들은 전 세계에 서버를 가지고 있다.
  사용자에게 가까운 CDN 서버를 사용하여 웹사이트 방문자에 가까운 콘텐츠를 제공하므로 페이지 로드 시간이 빨라지게 된다.
• 서버가 여러 개로 분산되어 있어 높은 트래픽에도 영향을 덜 받는 빠른 서비스를 제공할 수 있다.
• 캐싱과 기타 최적화를 사용하여 원본 서버가 제공해야 하는 데이터 양을 줄이고 웹사이트 소유자의 호스팅 비용을 줄일 수 있다.

 

단점 👎

• 특정 국가나 지역만을 대상으로 하는 웹 서비스의 경우 CDN의 필요성이 적다.
  => 오히려 불필요한 서버가 늘어남
• CDN 서버가 충분하지 않거나 성능이 안정적이지 않으면 시스템 전체에 문제가 발생할 수 있다.

 

---

 

📌 CORS (Cross-Origin Resource Sharing)

: 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 (교차 출처 리소스 공유)

• 서로 다른 출처라도 리소스 요청, 응답을 허용할 수 있도록 하는 정책
• 출처를 구성하는 세 요소는 프로토콜·도메인(호스트 이름)·포트로, 이 중 하나라도 다르면 CORS 에러를 만나게 된다.
• 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다.
  보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.
• 동일 출처 정책을 따르는 API를 사용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며,
  다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 한다.

 

🔺 crossorigin 속성

: 요소가 CORS 요청을 처리하는 방식을 명시하여 요소가 fetch한 데이터를 CORS 가능하게 한다.

 

 

 

 

📍 CORS 작동 방식

• 표준 인터넷 통신에서 브라우저는 애플리케이션 서버에 HTTP 요청을 보내고 HTTP 응답으로 데이터를 수신하여 표시한다.
• 브라우저 용어에서는 현재 브라우저 URL을 현재 origin이라고 하고, 서드 파티 URL을 cross origin이라고 한다.

 

CORS 할 때 요청-응답 프로세스

1. 브라우저는 현재 origin의 프로토콜, 호스트 및 포트에 대한 정보가 포함된 origin 헤더를 요청에 추가한다.
2. 서버는 현재 origin 헤더를 확인하고 요청된 데이터와 Access-Control-Allow-Origin 헤더로 응답한다.
3. 브라우저는 Access-Control-Allow-Origin 헤더를 확인한 후 반환된 데이터를 클라이언트 애플리케이션과 공유한다.

서버에서 CORS를 허용하지 않는 경우에는 오류 메시지로 응답한다.

 

 

---

참고

 

CDN - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

콘텐츠 전송 네트워크(CDN) 이해하기 | NetApp

 

CDN(Content Delivery Network)이란? | IBM

 

 

HTML attribute: crossorigin - HTML: Hypertext Markup Language | MDN

 

CORS(교차 출처 리소스 공유) | 토스페이먼츠 개발자센터

 

CORS란 무엇입니까? - 교차 오리진 리소스 공유 설명 - AWS