CORS 정책

Hyun·2024년 8월 13일

frontend

frontend 필요 지식

목록 보기

5/9

CORS 정책이란?

cors

브라우저가 다른 출처에서 온 자원에 대한 접근을 허용할지 말지를 정하는 정책

기본적으로 웹 브라우저는 동일 출처 정책(same-origin-policy)을 따르기 때문에, 한 출처에서 로드된 데이터들은 다른 출처의 리소스에 접근할 수 없다.

보안상의 이유

악의적인 사이트 공격
프라이버시 보호
안전한 자원 공유
데이터 무결성 보호

출처?

origin부분에 해당하는 프로토콜, 호스트, 포트 부분이 동일해야 동일 출처로 간주한다.

cors의 동작방식

요청 및 응답 헤더:
cors는 특정 http 헤더를 사용해서 요청이 허용되는지 여부를 결정한다.
헤더에는

Origin: 요청을 보낸 출처를 정의
예를 들어, https://example.com에서 요청이 발생하면 Origin: https://example.com 이라는 헤더가 요청에 포함된다.

Access-Control-Allow-Origin: 서버에서 이 헤더를 통해 어떤 출처가 자원에 접근할 수 있는지를 정의한다.
예를 들어, Access-Control-Allow-Origin: https://example.com 은 example.com 도메인에서의 요청을 허용합니다.
Preflight 요청:
이 요청은 HTTP OPTIONS 메소드를 사용해서 서버에 cors정책을 확인한다.
Preflight 요청에서 브라우저는 Origin, Access-Control-Request-Method, Access-Control-Request-Headers와 같은 헤더를 포함한다.

요청에 서버는 가능하면 이런식으로 대답해준다.
```
HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST
```
만약 cors허용이 안될 경우에는
cors 관련 헤더가 누락 된 상태
```
HTTP/1.1 200 OK
Content-Type: application/json
```
Access-Control-Allow-Origin 헤더가 누락
```
HTTP/1.1 200 OK
Access-Control-Allow-Methods: GET, POST
Content-Type: application/json
```
Access-Control-Allow-Origin 헤더가 있으나 요청의 Origin이 일치하지 않는 경우

이런식으로 응답이 돌아오고, 브라우저에서는 개발자가 알기 쉽게
이런 에러를 띄워준다.

Access to fetch at 'https://api.example.com/data' from origin 'https://your-website.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
실제 요청
preflight 요청이 성공적으로 완료된 후, 실제 요청을 보낸다. 요청에는
필요 메서드가 포함된다. (get, post)
브라우저의 정책 적용
브라우저는 이제 서버의 응답을 확인해서 Access-Control-Allow-Origin 헤더가 요청의 Origin 헤더와 일치하는 경우에만 자원에 접근을 허용