오리진 간 리소스 공유(Cross-Origin-Resource-Sharing, CORS) 개요

2635 단어 CORS브라우저

오리진 간 리소스 공유(Cross-Origin-Resource-Sharing, CORS)란?



  • 한 오리진에서 실행되는 웹 앱에 다른 오리진에 있는 리소스에 대한 액세스 권한을 부여하도록 브라우저에 지시하는 메커니즘입니다.
  • 오리진
  • 웹 콘텐츠에 액세스하는 데 사용되는 URL 프로토콜, 도메인 (호스트) 및 포트에 의해 정의 된 정보.
  • 스키마, 도메인 (호스트) 및 포트가 모두 일치하면 두 객체는 ​​동일한 오리진이라고 할 수 있습니다.

  •   http://example.com/app1/index.html
      http://example.com/app2/index.html
    
  • 오리진 간 요청 예


  • https://domain-a.com에서 제공하는 웹 앱의 프런트 엔드 JavaScript가 XMLHttpRequest를 사용하여 https://domain-b.com/image-b.png에 요청하는 경우
  • 보안상의 이유로 브라우저는 스크립트가 실행하는 오리진 간 HTTP 요청을 제한합니다.
  • XMLHttpRequest 또는 Fetch는 동일한 오리진 정책 (한 오리진 리소스는 해당 리소스에서 다른 오리진 리소스에 액세스 할 수 없도록 제한)을 따릅니다.
  • 위의 API를 사용하는 웹 앱은 해당 앱과 동일한 오리진에 대해서만 리소스를 요청할 수 있으며, 다른 오리진의 경우 올바른 CORS 헤더를 포함해야합니다.


  • 액세스 제어 방법



    간단한 요청


  • 서버 측에서 응답 헤더 Access-Control-Allow-Origin에 요청 소스를 지정하여 응답을 반환합니다.


  • 프리플라이트 요청


  • OPTIONS 메서드가 지정된 HTTP 요청을 다른 도메인의 리소스로 보내고 실제 요청을 제출해도 문제가 있는지 확인합니다.
  • 오리진 간의 요청이 사용자 데이터에 영향을 줄 수있는 경우에 발생합니다.
  • Access-Control-Allow-Methods : 리소스에 액세스 할 때 허용하는 메서드를 지정합니다. 프리 플라이트 요청 응답에 사용됩니다.
  • Access-Control-Allow-Headers : 프리 플라이트 요청 응답에서 사용하여 요청에서 사용할 HTTP 헤더를 나타냅니다.



  • 자격 증명이 있는 요청


  • 쿠키로 요청합니다.

  • 서버가 액세스를 허용하면 Access-Control-Allow-Credentials:true를 부여하여 응답을 반환합니다.
  • Access-Control-Allow-Credentials : 요청에 대한 응답을 공개할 수 있는지 여부를 나타내는 헤더. 프리 플라이트 요청의 응답의 일부로 사용될 때 실제 요청에서 자격 증명을 사용할 수 있는지 여부를 나타냅니다.



  • 참고 정보


  • 오리진 간 리소스 공유(CORS)
  • 좋은 웹페이지 즐겨찾기