CORS(교차 출처 리소스 공유)

CORS가 왜 필요한가?

서버가 허용한 클라이언트의 요청에만 응답하기 위해서

cross origin의 기준 : 출처가 달라야함

동일 출처 (same origin) : 스킴 (http) 과 호스트(example.com)일치 (Fetch API는 동일 출처 정책을 따름)

다른 출처 (cross origin) : 스킴 (http) 과 호스트(example.com),포트 불일치

preflight request (사전요청) : 본요청 가기전에 보내는 요청(나 가도 되니?)

OPTIONS 메소드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인

preflight request 가 끝나면 본요청을 보낸다

cors 사용예시

const defaultCorsHeader = {   
   "Access-Control-Allow-Origin": "*", // 모든 엔드포인틀를 허용
   "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS", // get,post,put,delete,options 메소드를 허용
   "Access-Control-Allow-Headers": "Content-Type, Accept",
   "Access-Control-Max-Age": 10, // preflight를 얼마나 잦은 주기로 보낼것인가 (preflight 유효기간 10초)
 };

$ serve client/ -l 3000 ; 서브 유틸리티를 이용해서 다른 포트를 연다

CORS는 추가 HTTP헤더를 사용하여, 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 것

다른 사이트에서 fetch API를 이용해서 호출할 때 CORS를 사용