CORS

Nam jun Paik, Li Tai Po

CORS란

CORS(Cross-Origin Resource Sharing)는 서버의 리소스를 외부에 허용해줄 것인지 아닐지를 결정하는 메커니즘이이다. 이를 판단하기 위해 HTTP-헤더를 사용한다. 보통 보안 문제로 외부의 접근을 허용하지 않도록 되어있는데, 만약 허용하고 싶다면 CORS 설정을 바꿔주면 된다. 특정 도메인만 허용할 수도 있고 모든 도메인(*)을 허용할 수도 있다.

작동 원리

function httpGetAction(urlLink)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", urlLink, false ); 
    xmlHttp.send();
    return xmlHttp.responseText;
}

우리가 이런 HTTP 호출을 한다고 생각해보자.

Failed to load https://contribute.geeksforgeeks.org/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.google.com' is therefore not allowed access.

허용되지 않은 리소스에 접근할 경우 이런 문구를 볼 수 있다.

접근을 허용하기 위해 아래 값을 HTTP 헤더에 추가해줘야 한다.

• Access-Controll-Allow-Origin: [origin]
  • ex) Access-Control-Allow-Origin: https://www.hello.com(특정 도메인만 허용)
• Access-Control-Allow-Origin: *
  • 어떤 사이트도 리소스에 접근할 수 있다.

접근 유형

리소스 접근 요청은 2가지 유형으로 구분된다.

• 간단한 요청
  • 예시 : ORIGIN 정보를 헤더에 담아 타겟 사이트에 리소스 요청 -> 외부 사이트는 도메인을 확인 -> 리소스 응답 여부 결정
• 복잡한 요청
  • 예시 : 요청 보내기 전 pre-flight 요청을 HTTP 요청 메소드 옵션에 담아 타겟 사이트에 먼저 보냄 -> 타겟 사이트가 요청을 허용 -> 실제 GET/POST 요청을 진행

결국 pre-flight로 리소스 요청이 가능한 사이트인지 확인하는 작업만 제외하면 별 다르지 않다.

Reference

• https://www.geeksforgeeks.org/cross-origin-resource-sharing-cors/