CORS

CORS(Cross-Origin-Resource-Sharing)는 다른 출처(origin)를 가진 주소로 요청이 들어왔을 때 발생할 수 있는 에러이다.

여기서 출처(Origin)란 port번호까지 포함한 url을 의미한다.
예를 들어 localhost:3000/tokens/phone에서 localhost:3000을 origin이라고 한다.

port번호가 다른 경우에도 CORS 에러는 발생하는데 이는 같은 localhost임에도 다른 출처로 인식되기 때문이다.
그리고 도메인과 포트번호가 같더라도 프로토콜이 다른 경우(ex - http, https)에도 CORS에러가 발생한다.

CORS 동작 방식

Simple requests인 경우

1. 서버로 요청을 보낸다.
2. 서버의 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더 Access-Control-Request-Headers의 값을 비교하여 유효한 요청이라면 리소스를 응답합니다. 만약 유효하지 않은 요청이라면 브라우저에서 이를 막고 에러가 발생

preflight 요청일 경우

1. Origin헤더에 현재 요청하는 origin과, Access-Control-Request-Method헤더에 요청하는 HTTP method와 Access-Control-Request-Headers요청 시 사용할 헤더를 OPTIONS 메서드로 서버로 요청합니다. 이때 내용물은 없이 헤더만 전송합니다.
2. 브라우저가 서버에서 응답한 헤더를 보고 유효한 요청인지 확인합니다. 만약 유효하지 않은 요청이라면 요청은 중단되고 에러가 발생합니다. 만약 유효한 요청이라면 원래 요청으로 보내려던 요청을 다시 요청하여 리소스를 응답받습니다.