CORS(Cross-Origin Resource Sharing)

• 브라우저에서 실행되는 스크립트가, 다른 출처(origin)의 리소스에 접근 할 수 있도록 허용하는 보안 메커니즘
• 악의적인 스크립트로부터 사용자 데이터를 보호하기 위함
• CORS 는 Same-Origin Policy의 제한을 완화하기 위해 도입되었다.

동작 방식

1. GET,HEAD 그리고 특정 조건을 만족하는 POST 요청은 프리플라이트 없이 바로 실행된다.
2. 그 외의 메서드나 복잡한 요청은 프리플라이트 요청을 통해서 서버의 허가를 먼저 확인한다.
   • 해당 메서드가 허용되었는지 체크한다.
3. 서버의 CORS 설정에 따라서, 요청의 허용 여부가 결정된다.

• Simple Requests:
  • GET, HEAD, POST 중 하나의 메서드 사용
  • 허용된 헤더만 사용
  • Content-Type이 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나
• Preflight Requests:
  • 본 요청을 보내기 전의 예비요청이다.
  • Simple Request가 아닌 경우 브라우저가 OPTIONS 메서드로 사전 요청을 보냄
  • 서버가 실제 요청을 허용하는지 확인
• 서버 응답:
  • Access-Control-Allow-Origin 헤더로 허용된 출처 지정
  • 필요시 다른 CORS 관련 헤더도 포함

주요 CORS 헤더

• Access-Control-Allow-Origin: 허용된 출처를 지정
• Access-Control-Allow-Methods: 허용된 HTTP 메서드를 지정
• Access-Control-Allow-Headers: 허용된 헤더를 지정
• Access-Control-Allow-Credentials: 인증 정보 포함 여부

Preflight Request 요청

• 복잡한 요청(PUT, DELETE)의 경우, 브라우저는 먼저 OPTIONS 메서드로 프리플라이트 요청을 보낸다.
• 이를 통해 실제 요청이 안전한지 확인한다.
• 단순 요청의 경우는 프리플라이트 없이 직접 전송한다.

구현

• 서버에서 적절한 CORS 헤더를 설정해야한다.
• 클라(브라우저)에서는 자동으로 CORS 정책을 적용한다.

결국에는 브라우저의 역할

• 이렇게 출처를 비교하는 로직은 서버에 구현된 스펙이 아닌, 브라우저에서 구현되어있는 스펙이다.
• 즉 Same-Origin Policy 및 CORS 는 브라우저에서 적용되는 정책이므로, 브라우저를 통하지 않는 서버간 통신 (ex. Postman)에서는 해당 정책이 적용되지 않는다.

간단설명

• CORS는 Cross-Origin Resource Sharing의 약자로, 웹 브라우저에서 보안상의 이유로 구현된 메커니즘입니다. 이는 한 출처(origin)에서 실행 중인 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있는 권한을 부여하도록 하는 체제입니다
• 브라우저는 cross-origin HTTP 요청을 보낼 때, 추가적인 HTTP 헤더를 포함시켜 서버에 권한을 요청합니다. 서버는 이에 대해 적절한 헤더로 응답하여 접근 허용 여부를 알립니다\
• 서버 측에서는 적절한 CORS 헤더(예: Access-Control-Allow-Origin)를 설정하여 어떤 출처의 요청을 허용할지 지정할 수 있습니다