고딩왕 코범석
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'>]'
브라우저에서 보내는 커스텀 헤더 이름을 알려주기 위해 사용됩니다.
출처
'Computer Science > Web' 카테고리의 다른 글
OSI 7계층 정리 (0) | 2021.03.31 |
---|---|
HTTP 메서드 (0) | 2021.02.11 |