(스파르타 코딩클럽) CORS란

CORS(Cross-Origin Resource Sharing)

출처가 다른 자원들을 공유한다는 뜻.

한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념.

---

출처란

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

위의 구성요소 중 Protocol + Host + Port 3가지가 같으면 동일 출처라 한다.

 

*동일 출처 예시

http://Example.com:80 http://example.com	HTTP 기본 Port인 80번이 생략되어있으므로 동일 출처입니다
http://example.com/app1/index.html http://example.com/app2/index.html	Protocol, Host, Port(생략)이 같으며, Path부터 다르므로 동일 출처입니다

 

* 다른 출처 예시

http://example.com/app1 https://example.com/app2	Protocol이 다릅니다
http://example.com http://www.example.com http://myapp.example.com	Host가 다릅니다
http://example.com http://example.com:8080	80, 8080으로 포트가 다릅니다

 

다른 출처 요청이라면, CORS 정책에 준수하여 요청해야 정상적으로 응답을 받을 수 있다.

---

동일 출처 요청 과 다른 출처 요청이 다른지 비교

 

요청하는 클라이언트와 요청받는 서버가 같은 출처에 있으면 동일출처.

서로 다른 서버에 있으면 다른 출처 요청이다.

 

 

1. 핸드폰은 domain-a.com
2. 서버는 domain-a.com, domain-b.com 2가지이다.
3. 핸드폰의 domain-a.com이 서버의 domain-a.com으로 요청하면 동일 정책이라 문제가없다.
4. 서버의 domain-b.com 서버에 요청하면 Host가 다르기에 다른 출처 요청을한다.

기본적으로 동일 출처 요청만 자유롭게 요청이 가능하고 동일 출처 정책(Same-Origin Policy)라고 한다.

---

다른 출처 요청 정책 3가지

 

단순 요청(Simple Request)

GET, HEAD, POST 요청만 가능하다.

 

---

프리플라이트 요청(Preflighted Reqeust)

 

Options메서드로 HTTP 요청을 미리 보내서 실제 요청이 전송하기에 안전한지 확인한다.

다른 출처 요청이 유저데이터에 영향을 줄 수 있어 미리 전송한다는 의미.

---

인증 정보 요청(Credential Request)

인증 정보 요청은 쿠키, 인증 헤더, TLS 클라이언트 인증서 등의 신용정보와 함께 요청한다.

 

기본적으로 CORS 정책은 다른 출처 요청에 인증정보를 포함을 허용하지 않는다.

요청에 인증을 포함하는 플래그 또는 access-control-allow-credentilas가 ture로 설정 되 있다면 요청할 수 있다.

---

서버 응답에

access-control-allow-credentials가 true로 설정되지 않거나

access-control-allow-origin 헤더에 있는 값이 허용된 출처가 아니라면 

 

오류가 발생한다.

 

https://escapefromcoding.tistory.com/724

CORS란 무엇인가?