CORS

CORS란??

CORS란 Corss Origin Resource Sharing 약자로 오리진을 크로스해서 데이터를 공유한다는 의미다.
여기서 오리진은 도메인(ip주소)를 의미힌다.

corss-origin은 보안적인 이유로 인해 브라우저에서 HTTP 요청들을 제한한다.
corss-origin 요청을 하기 위해서는 서버의 동의가 필요하다.
만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절한다.
이러한 허락을 구하고 거절하는 메커니즘을 CORS라고 부르는 것이다.

cross-origin이라고 불리는 경우

• 프로토콜이 다른 경우 : http와 https는 프로토콜이 다름
• 도메인이 다른 경우 : tthh12.com과 tthh123.com 은 다름
• 포트 번호가 다른 경우 : 8080포트와 3000포트는 다름

CORS의 동작원리

CORS의 동작원리는 요청을 어떻게 했는냐에 따라 달라지게 된다.

Simple requests인 경우

1. 서버로 요청을 보낸다.
2. 서버의 응답이 왔을 때 브라우저가 요청한 Origin과 응답한 헤더 Access-Control-Request-Headers의 값을 비교하여 유효한 요청인지 확인하고 그에 대한 응답을 해준다.
3. 유효한 요청이 아닌 경우에는 브라우저에 이를 막고 에러를 반환한다.

Simple requests란?

단순 요청(Simple requests)이란 다음과 같은 조건을 모두 충족하는 요청이다.

• 다음 중 하나의 메서드
  • GET
  • HEAD
  • POST
• 유저 에이전트가 자동으로 설정 한 헤더를 제외하고 설정 할 수 있는 다음과 같은 헤더들만 변경하면서
  • Accept
  • Accept-Language
  • Content-Language
• Content-Type 헤더가 다음과 같은 경우
  • application/x-www-form-urlencoded
  • multipart/form-dat
  • text/plain

이와 같은 내용을 단순 요청이라 부른다.
이 요청은 추가적으로 확인하지 않고 바로 본 요청을 보낸다.

preflight 요청일 경우

1. Origin 헤더에 현재 요청하는 origin과 Access-Control-Request-Method 헤더에 요청하는 HTTP method와 Access-Control-Request-Headers 요청시 사용할 헤더를 OPTION 메서드로 서버 요청을 한다.
   이 때는 내용물 없이 헤더만 전송한다.
2. 브라우저가 서버에서 응답한 헤더를 보고 유효한 요청인지 확인하는데 유효한 요청이면 원래 요청하려던 요청을 다시 요청하여 리소르를 응답 받는다.
3. 유효한 요청이 아닌경우 에러를 반환한다.

preflight란?

단순 요청(Simple requests)가 아닌 cross-origin 요청은 모두 preflight 요청을 하게 되는데, 실제 요청을 보내는 것이 안전한지 또는 서버와 연결이 제대로 되어 있는지 확인하기 위해 먼저 OPTION 메서드를 사용하여 HTTP 요청을 보낸다.

Access-Control-Request-Method && Access-Control-Request-Headers

• Access-Control-Request-Method
  • preflight 요청을 할 때 실제 요청에서 어떤 메서드를 사용할 것인지 서버에게 알리기 휘새 사용
• Access-Control-Request-Headers
  • preflight 요청을 할 때 실제 요청에서 어떤 header를 사용할 것인지 서버에게 알리기 위해 사용

참고 : [mdn] 교차 출처 리소스 공유 (CORS), CORS란 무엇인가?