CORS

의미

💡 SOP의 예외를 두는 것
💡 다른 출처의 리소스(예를 들어 지도 api 등)를 사용하기 위해서는
CORS가 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제

Origin 헤더에 자신의 Origin을 설정하고, 서버로부터 응답을 받으면
응답의 Access-Control-Allow-Origin 헤더에 설정된 Origin의 목록에
요청의 Origin 헤더 값이 포함되는지 검사

Origin?

💡 URL에서 프로토콜, 도메인(호스트), 포트 번호를 합친 부분

https://www.naver.com:443

SOP?

💡 동일한 Origin으로만 요청을 보낼 수 있게 하는 것
💡 다른 사이트와의 리소스 공유를 제한

동작방식

📗 프리 플라이트 요청
OPTIONS 메소드로 사전 요청을 보내 해당 출처의 리소스에 권한이 있는지 확인하는 것

-미리 보내서 개략적으로 확인 하는 것으로 리소스 측면에서 효율적
-CORS 대비가 되어있지 않은 경우 서버 보호 가능

클라이언트 -(실제 요청)-> 브라우저 -(프리플라이트 request)-> 서버
클라이언트 --- 브라우저 <-(response)- 서버
클라이언트 --- 브라우저 -(실제 요청)-> 서버
클라이언트 <-(response)- 브라우저 <-(response)- 서버

📗 단순 요청

1. 메소드가 GET, HEAD, POST 중 하나
2. Accept, Accept-Language, Content-Language, Content-Type(application/x-www-form-urlencoded, multipart/form-data, text/plain 값만 허용) 헤더의 값만 수동으로 설정
   
   

📗 인증 정보를 포함한 요청
인증정보란 쿠키(Cookie) 혹은 Authorization 헤더에 설정하는 토큰 값을 의미
인증정보를 보내기 위해서는 클라이언트에서 별도의 설정이 필요함

XMLHttpRequest, jQuery의 ajax, 또는 axios
withCredentials : true
fetch API
Access-Control-Allow-Credentials : true

참고

코드스테이츠 교과서
[NODE] 📚 cors 모듈 - CORS 간편 설정하기
SOP(Same-Origin-Policy)
CORS (Cross Origin Resource Sharing) 이해하기