CORS란?

• Cross-Origin Resource Sharing로 교차 출처 리소스 공유

• 서로 다른 Origin을 가진 Application이 서로의 Resource에 접근할 수 있도록 해줌

  

프로토콜, 호스트, 포트 를 통틀어 Origin 이라고 함즉, 여기서 하나라도 다르면 Cross Origin이 됨보안상의 이유로 Cross Origin HTTP Request를 제한함

하지만 한 서버에서 데이터와 정적파일을 같이 렌더링해 사용자의 요청을 처리하는것이 아닌 프런트 서버와 api 서버를 분리하여 통신한다면 Cross-Origin 이므로 오류가 발생할 것이다.

CORS 동작원리

CORS의 동작 방식은 단순 요청 방법과 예비 요청을 먼저 보내는 방법 2가지 방법이 있습니다.

Simple request

단순 요청 방법은 서버에게 바로 요청을 보내는 방법입니다. 아래 그림은 자바스크립트에서 API를 요청할 때 브라우저와 서버의 동작을 나타내는 그림입니다.

단순 요청은 서버에 API를 요청하고, 서버는 Access-Control-Allow-Origin 헤더를 포함한 응답을 브라우저에 보냅니다. 브라우저는 Access-Control-Allow-Origin 헤더를 확인해서 CORS 동작을 수행할지 판단합니다.

Simple request 조건

서버로 전달하는 요청(request)이 아래의 3가지 조건을 만족해야 서버로 전달하는 요청이 단순 요청으로 동작합니다.

• 요청 메서드(method)는 GET, HEAD, POST 중 하나여야 합니다.
• Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width를 제외한 헤더를 사용하면 안 됩니다.
• Content-Type 헤더는 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나를 사용해야 합니다.

첫 번째 조건은 어렵지 않은 조건이지만 2번, 3번 조건은 까다로운 조건입니다. 2번 조건은 사용자 인증에 사용되는 Authorization 헤더도 포함되지 않아 까다로운 조건이며, 3번 조건은 많은 REST API들이 Content-Type으로 application/json을 사용하기 때문에 지켜지기 어려운 조건입니다.

Preflight request