[10분 테코톡] 나봄의 CORS

https://youtu.be/-2TgkKYmJt4

SOP(Same Origin Policy) : 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식

출처(Origin) => URL의 Protocol, Host, Port를 통해 판단 가능

https://github.com:443 => Protocol(https://), Host(github.com), Port(:443)  

Same origin / Cross origin

  

CORS(Cross-Origin Resource Sharing) : 다른 출처의 자원을 공유. 추가 HTTP 헤더를 사용하여 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

  

CORS 접근 제어 시나리오

프리플라이트 요청(Preflight Request) : OPTIONS 메서드를 통해 다른 도메인의 리소스에 요청이 가능한지 확인 작업, 요청이 가능하다면 실제 요청(Actual Request)을 보낸다. (프리플라이트가 필요한 이유 : 서버가 CORS를 인식하고 핸들할 수 있는지 먼저 확인하여 CORS를 인식하지 못하는 서버들을 보호한다.)

단순 요청(Simple Request) : Preflight 요청 없이 바로 요청을 날린다. but 조건을 만족해야 함(메서드(GET, POST, HEAD), Content-Type(application/x-www-form-urlencoded, multipart/form-data, te/plain), 헤더(Accept, Accept-Language, Content-Language, Content-Type)

인증정보 포함 요청(Credentialed Request) : 인증 관련 헤더를 포함할 때 사용하는 요청

  

CORS 해결하기

프론트 프록시 서버 설정(개발 환경)

직접 헤더에 설정해주기

스프링 부트를 이용하기