CORS
처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청 될 경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다.
어플리케이션을 보호한다, 웹서버를 보호한다는 개념이라기 보다는 어플리케이션 사용자를 보호하기 위한 브라우저만의 자발적인 보안 정책이다.
서로 다른 도메인의 리소스 요청을 보내고 받기 위해서는 웹프론트엔드와 서버에서 특정한 작업을 해주어야 한다.
프론트엔드의 경우에는 Request Header에 CORS 관련 옵션을 넣어주는 것임.
서버의 경우에는 Response Header에 해당하는 프론트의 요청을 허용한다는 내용을 넣어 주는 것이다.
단순 요청(simple request)
다음 조건을 모두 충족하는 요청
이 중 하나의 메서드가 있어야 한다.
- GET,HEAD,POST
User-Agent가 자동으로 설정 한 헤더 (예를들어, Connection, User-Agent, Fetch 명세에서 “forbidden header name”으로 정의한 헤더)외에, 수동으로 설정할 수 있는 헤더는 오직 Fetch 명세에서 “CORS-safelisted request-header”로 정의한 헤더 뿐)
- Accept, Accept-Language, Content-Language, Content-Type
Content-Type 헤더는 다음의 값들만 허용된다.
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
프리플라이트 요청 ("preflighted" request)
“simple requests” 와는 달리, 먼저 OPTIONS 메서드를 통해 다른 도메인의 리소스로 HTTP 요청을 보내 실제 요청이 전송하기에 안전한지 확인한다. Cross-site 요청은 유저 데이터에 영향을 줄 수 있기 때문에 미리 preflighted 한다.
OPTIONS 요청
OPTIONS는 서버에서 추가 정보를 판별하는데 사용하는 HTTP/1.1 메서드이다. 또한 safe 메서드이기 때문에, 리소스를 변경하는데 사용할 수 없다. OPTIONS 요청과 함께 두 개의 다른 요청 헤더가 전송된다.
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
Access-Control-Request-Method 헤더는 preflight request의 일부로, 실제 요청을 전송할 때 POST 메서드로 전송된다는 것을 알려줍니다.
Access-Control-Request-Headers 헤더는 실제 요청을 전송 할 때 X-PINGOTHER 와 Content-Type 사용자 정의 헤더와 함께 전송된다는 것을 서버에 알려준다. 이제 서버는 이러한 상황에서 요청을 수락할지 결정할 수 있다.
서버가 요청 메서드와 (POST) 요청 헤더를 (X-PINGOTHER) 받을 수 있음을 나타내는 응답이다.
Access-Control-Allow-Origin: hxxp://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
서버는 Access-Control-Allow-Methods 로 응답하고 POST 와 GET 이 리소스를 쿼리하는데 유용한 메서드라고 가르쳐준다. 이 헤더는 Allow 응답 헤더와 유사하지만, 접근 제어 컨텍스트 내에서 엄격하게 사용된다.
또한 Access-Control-Allow-Headers 의 값을 "X-PINGOTHER, Content-Type" 으로 전송하여 실제 요청에 헤더를 사용할 수 있음을 확인한다. Access-Control-Allow-Methods와 마찬가지로 Access-Control-Allow-Headers 는 쉼표로 구분된 허용 가능한 헤더 목록이다.
마지막으로 Access-Control-Max-Age는 다른 preflight request를 보내지 않고, preflight request에 대한 응답을 캐시할 수 있는 시간(초)을 제공한다. 위의 코드는 86400 초(24시간) 이다. 각 브라우저의 최대 캐싱 시간 은 Access-Control-Max-Age 가 클수록 우선순위가 높다.
