CORS 교차 출처 리소스 공유

• 브라우저에서 다른 출처의 리소스를 공유하는 방법

여기서 말하는 출처 → Protocol + Host + Port Number

출처 구분하는 기준이 잘 나와있어서 긁어왔습니다

동일 출처 정책 SOP (Same Origin Policy)?

• 테스트 환경에서 잘 되다가 브라우저에서 안되는 경우

  • 동일 출처가 아니라서 다른 출처의 리소스 접근을 금지하고 있음

• 이걸 지키면 보안 취약점을 노린 공격을 방어할 수 있음

  • 하지만 현실적으로 웹페이지들은 다른 출처의 리소스를 사용할 수 밖에 없어서, 외부 리소스를 가져오는 방법이 존재해야함

  → 여기서 외부 리소스를 사용하기 위한 SOP 예외조항이 CORS

CORS 동작원리

1. 단순 요청 방법

   • 서버에서 바로 요청을 보내는 방법
   • 서버가 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보내줌
     • 헤더 확인하고 브라우저가 예외조항 CORS 처리해준다
   • 단순 요청할 수 있는 3가지 조건
     • 요청 메서드는 GEt, POST, HEAD 중 하나여야 한다
     • Content-Type 헤더로 application, multipartform, text 중 하나 사용해야함
     • Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안돼

2. 미리 요청 방법

   • 서버에 예비 요청을 보내서 안전한지 판단 후, 본 요청을 보내는 방법
   • 실제 리소스를 요청하기 전에 OPTIONS라는 메서드를 통해 실제 요청을 전송할지 판단
   • OPTIONS 예비 요청을 보내고, 이 요청에 대한 응답으로 서버가 Access-Control-Allow-Origin 헤더를 보내게 된다

CORS 에러 해결 방법

• 서버에서 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보내는 방식으로 CORS 에러를 해결할 수 있다