CORS

개요

Cross-Origin-Resource-Sharing의 약자로 브라우저에서 다른 출처의 리소스를 공유하는 것입니다.

URL 구조

출처(Origin)란?

Protocol + Host + Port = Origin

같은 출처 vs 다른 출처

Origin : https://beomseok.com

동일 출처 정책이란?

브라우저에서 api를 호출 시 CORS policy 에러가 발생할 수 있습니다. 그 이유는 동일 출처 정책을 지키기 때문에 다른 출처의 리소스 접근을 금지하기 때문입니다. 예를 들어 http://beomseok.io에서 http://beomseok-api.io라는 api 서버로 데이터를 요청한다면 동일 출처를 위반한 것이 된다.

CORS 동작 원리

Simple Request

성립 조건

• GET, POST, HEAD중 하나의 요청 메서드여야 합니다.
• 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 중 하나여야 합니다.

json으로 요청을 보낼때, 요청 헤더에 Authorization과 같은 헤더가 있을 경우는 지켜지기 어려운 조건들입니다.

Preflight Request

실제 리소스를 요청하기 전에 OPTIONS라는 메서드를 통해 실제 요청을 전송할지 판단한다. 이 메서드로 예비 요청을 먼저 보내고 Access-Control-Allow-Origin 이라는 헤더를 포함한 응답을 받게되는데, 브라우저는 단순 요청과 동일하게 Access-Control-Allow-Origin를 확인 후 CORS 동작을 수행할 지 확인합니다.

HTTP 응답 헤더

CORS를 해결하기 위한 응답 헤더가 무엇이 있을까?

Access-Control-Allow-Origin: '<'origin'>' 또는 와일드카드

Access-Control-Allow-Origin: https://beomseok.io
Access-Control-Allow-Origin: *

의미 : 출처에 상관없이(*, 와일드카드) 또는 지정된 출처는 서버의 리소스를 접근할 권한이 생깁니다.

Access-Control-Allow-Methods: '<'method'>' '[', method ']'

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, PUT

의미 : 출처에 상관 없이 GET, PUT 요청은 허용합니다.

Access-Control-Expose-Headers: '<'header-name'>''[', '<'header-name'>]'

Access-Control-Expose-Headers: beomseok-Header

의미 : options 요청으로 헤당 헤더를 응답받으면, 클라이언트의 요청 헤더에 서버에서 받은 beomseok-Header를 들고 요청한다.

Access-Control-Allow-Credentials: true

Access-Control-Allow-Credentials: true

의미 : js 요청시 credentials가 include 일 때 요청에 대한 응답을 할 수 있는지를 나타냅니다. 보통은 false로 설정되어 있습니다!

HTTP 요청 헤더

요청 헤더들은 별도로 명시해주지 않아도 브라우저에서 OPTIONS 요청에 추가합니다.

Origin : '<'origin'>'

요청하는 대상의 출처를 나타냅니다. API를 호출하는 페이지의 출처 값이 저장됩니다.

Access-Control-Request-Method: '<'method'>'

실제 요청이 어떤 HTTP 메서드를 사용하는지 서버에 알려주기 위해 사용됩니다.

Access-Control-Request-Headers: '<'field-name'>[', '<'field-name'>]'

브라우저에서 보내는 커스텀 헤더 이름을 알려주기 위해 사용됩니다.

출처

• https://beomy.github.io/tech/browser/cors/