HTTP

모질라 (MDN)

• 참고 : https://developer.mozilla.org/ko/docs/Web/HTTP

CORS (Cross Origin Resource Sharing)

• HTTP 접근제어

• https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우.

• 기능적 개요

  교차 출처 리소스 공유 표준은 웹 브라우저에서 해당 정보를 읽는 것이 허용된 출처를 서버에서 설명할 수 있는 새로운 HTTP 헤더를 추가함으로써 동작합니다. 추가적으로, 서버 데이터에 부수 효과(side effect)를 일으킬 수 있는 HTTP 요청 메서드(GET을 제외한 HTTP 메서드)에 대해, CORS 명세는 브라우저가 요청을 OPTIONS 메서드로 "프리플라이트"(preflight, 사전 전달)하여 지원하는 메서드를 요청하고, 서버의 "허가"가 떨어지면 실제 요청을 보내도록 요구하고 있습니다. 또한 서버는 클라이언트에게 요청에 "인증정보"(쿠키, HTTP 인증)를 함께 보내야 한다고 알려줄 수도 있습니다.

  CORS 실패는 오류의 원인이지만, 보안상의 이유로 JavaScript에서는 오류의 상세 정보에 접근할 수 없으며, 알 수 있는 것은 오류가 발생했다는 사실 뿐입니다. 정확히 어떤 것이 실패했는지 알아내려면 브라우저의 콘솔을 봐야 합니다.

• 어떤 요청이 CORS를 사용하나요?

  교차 출처 공유 표준은 다음과 같은 경우에 사이트간 HTTP 요청을 허용합니다.

  • 위에서 논의한 바와 같이, XMLHttpRequest와 Fetch API 호출.

  • 웹 폰트(CSS 내 @font-face에서 교차 도메인 폰트 사용 시), so that servers can deploy TrueType fonts that can only be cross-site loaded and used by web sites that are permitted to do so.

  • WebGL 텍스쳐.

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

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

• axios 라이브러리