CORS(Cross-Origin Resource Sharing)

🌵 SOP(Same-Origin Policy, 동일 출처 정책)

• ‘같은 출처의 리소스만 공유가 가능하다’는 정책
• Origin(출처): 프로토콜, 호스트, 포트
  ⇒ 하나라도 다르면 동일한 출처가 아님

🔖  SOP가 필요하게 된 이유

• 보안상의 이점

🔖  BUT!

• 다른 출처의 리소스를 사용하게 되는 일이 많음

🌵 CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)

• 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
• 브라우저는 SOP에 의해 기본적으로 다른 출처의 리소스 공유를 막지만, CORS 사용시 접근 권한을 얻을 수 있음

📍 CORS 동작 방식

CORS Workflow

1. 단순 요청 (Simple Request)
   • 요청과 응답을 한번에 주고 받는 것
   • 조건이 까다로움
     • 메서드: GET, HEAD, POST
     • 자동설정 헤더 외에 Accept, Accept-Language, Content-Language, Content-Type 헤더 값만 수동으로 설정 가능
     • Content-Type헤더는 application/x-www-form-urlencoded, multipart/form-data, text/plain 값만 허용
     • XMLHttpRequestUpload 객체에 EventListener가 없을 때
     • ReadableStream 객체가 사용되지 않을 때
2. 프리플라이트 요청 (Pre-flight Request)
   • 실제 서버에 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것
   • 사전 권한 확인을 하고 실제 요청을 보내기 때문에, 실제 요청을 처음부터 통째로 보내는 것보다 리소스 측면에서 효율적
   • 만약 요청을 보낸 출처가 접근 권한이 없다면 브라우저에서 CORS 에러를 띄우게 되고, 실제 요청은 전달되지 않음
3. 인증정보를 포함한 요청 (Credentialed Request)
   • 요청 헤더에 인증 정보를 담아 보내는 요청으로, 보안을 더 강화하고 싶을 때 사용
   • 출처가 다를 때: 클라이언트 서버 모두 CORS 설정이 필요
     • 클라이언트 측: 요청 헤더에 withCredentials: true 설정
     • 서버 측: 응답 헤더에 Access-Control-Allow-Credentials: true를 넣어줘야 함
       • 서버 측에서 Access-Control-Allow-Origin을 설정할 때, ‘*’ 대신 직접적으로 명시를 해줘야 함
   • Credential Option
     • same-origin(기본값): 같은 출처(프로토콜, 호스트, 포트번호) 에서 허용
     • include: 모든 인증 정보 포함
     • omit: 모든 쿠키, 인증 정보 교환 불가

🌵 정리

• 같은 출처(Same-Origin) 판단 기준: 프로토콜, 호스트, 포트번호가 같음
• CORS 정책은 출처가 다른 리소스에 접근할 때 HTTP 헤더를 사용하여 권한을 부여하도록 브라우저에 알려주는 체제
• 출처 비교: 브라우저에 구현
• CORS의 3가지 동작 방법:  Simple Request, Prefilght Request, Credentialed Reqeust

✅ Ref.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

https://medium.com/@x24mak/cross-origin-resource-sharing-cors-275e52b021b8

https://evan-moon.github.io/2020/05/21/about-cors/#cors를-해결할-수-있는-방법

https://velog.io/@jimmy0417/WEB-CORS-개념과-적용-방법

https://velog.io/@young_pallete/CORS