CORS(Cross-Origin-Resource-Sharing)

CORS(Cross-Origin-Resource-Sharing) = 교차 출처 리소스 공유 정책

- 원인

 웹 브라우저는 HTTP 요청에 대해 어떤 요청을 하느냐에 따라 각기 다른 특징을 가지고 있기 때문 + SOP 정책

- Origin(출처)

 URL 구성요소 중 Protocol+Host+Port

 Origin 3개 요소만 같으면 나머지 URL 요소는 달라도 동일 출처로 인정

 Origin 3개 요소 중 하나라도 다르면 Cross-Origin

 

- SOP(Same Origin Policy)

 동일한 출처(Origin)에서만 리소스를 공유할수 있다는 법률을 가지고 있는 정책

 동일한 출처(Same-Origin) 서버에 있는 리소스는 자유롭게 가져올수 있지만, 다른 출처(Cross-Origin) 서버에 있는 리소스는 상호작용이 불가능

 

- SOP가 필요한 이유

 SOP정책 없이 출처가 다른 어플리케이션이 자유롭게 소통한다면 XSS(Cross-Site-Scripting) 등의 위험 발생 가능

- 브라우저의 CORS 동작

 1. 클라이언트에서 HTTP 요청 헤더에 Origin을 담아 전달
 2. 서버는 응답 헤더에 Access-Control-Allow-Origin을 담아 클라이언트에게 전달
 3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교 후 유효하지 않다면 CORS ERROR

- 해결책

 서버에서 Access-Control-Allow-Origin 헤더에 CORS 정책을 허용할 출처를 기재해서 클라이언트에 응답하면 됨

 

 

 

- 공부하게된 계기

 Vue3로 메모 애플리케이션을 만드는 프로젝트 도중 프론트엔드(Vue3)의 localhost:8080에서 백엔드(Express)의 localhost:3000 리소스를 요청해서 CORS 발생
 프로젝트에선 프론트엔드에서 proxy를 이용하여 해결: vue.config.js에 *devServer라는 proxy를 넣음

 

*devServer: 특정 주소로 시작하면 다른 주소로 요청을 보내도록 우회해주는 proxy

이를 이용해 "/api" 주소로 시작하면 백엔드의 "http://localhost:3000"으로 요청을 보내도록 우회하게 하여 CORS 해결

 

 

 

 

 

 

 

참고:

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

[WEB] 📚 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏