65. (Network/네트워크) CORS (Cross-Origin Resource Sharing) 교차 출처 리소스 공유 설명

---

[구 분]

​

구분 : Network / 네트워크

​

제목 : CORS (Cross-Origin Resource Sharing) 교차 출처 리소스 공유 설명

 

---

[설 명]

 

// --------------------------------------------------------------------------------------
[개발 및 테스트 환경]
// --------------------------------------------------------------------------------------

- 환경 : Web / HTTP

- 기술 : CORS (Cross-Origin Resource Sharing)

// --------------------------------------------------------------------------------------





// --------------------------------------------------------------------------------------
[설 명]
// --------------------------------------------------------------------------------------

1. CORS 는 교차 출처 리소스 공유 의미로 브라우저가 자신의 출처가 아닌 다른 어떤 출처 (도메인, 스킴 혹은 포트) 로부터 자원을 로딩하는 것을 
   허용하도록 서버가 허가 해주는 HTTP 헤더 기반 메커니즘입니다


2. CORS 는 호스팅하는 서버가 실제 요청을 허가할 것인지 확인하기 위해 브라우저가 보내는 HTTP 메서드와 헤더들에 대한 정보를 확인 후 리소스를 반환합니다


3. 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원하기 위해 fetch() 나 XMLHttpRequest 같은 API에서 CORS를 사용합니다


4. 교차 출처 요청의 예시 : 

  >> https://domain-a.com 에서 제공되는 프론트엔드 JavaScript 코드가 fetch()를 사용하여 https://domain-b.com/data.json 에 요청하는 경우

  >> 보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다 (도메인 다름 domain-a : domain-b)


5. CORS 요청 예시 : 

  >> fetch() 또는 XMLHttpRequest의 호출 (일부 요청은 CORS 사전 요청을 트리거하지 않을 수 있습니다)

  >> 웹 폰트(CSS 내 @font-face에서 교차 도메인 폰트 사용 시)

  >> WebGL 텍스쳐

  >> drawImage()를 사용해 캔버스에 그린 이미지/비디오 프레임

  >> 이미지로부터 추출하는 CSS Shapes

// --------------------------------------------------------------------------------------





// --------------------------------------------------------------------------------------
[참고 사이트]
// --------------------------------------------------------------------------------------

[Web Doc CORS 설명]

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS


[Reason: CORS header 이슈 에러 관리]

https://blog.naver.com/kkh0977/223375264177?


[NodeJs CORS 모듈 사용 및 웹 브라우저 요청 권한 부여]

https://blog.naver.com/kkh0977/223317268833?


[NodeJs 특정 도메인 CORS 설정 방법]

https://blog.naver.com/kkh0977/223317304002?


[SpringBoot CrossOrigin 설정 방법]

https://blog.naver.com/kkh0977/222728296727?trackingCode=blog_bloghome_searchlist

// --------------------------------------------------------------------------------------

---