TIL #29 CORS(Cross-Origin Resource Sharing)

출처 : http://definitiontech.co/cross-origin-resource-sharing-cors-what-is-it/

📌 CORS

CORS는 Cross Origin Resource Sharing의 약자로 한국말로는 '교차 출처 자원 공유'라고 부른다.

... 뭔 말이지? 🙄

풀어서 이야기 해보자면, 🤔

웹 애플리케이션은 페이지를 구성하기 위해 서버와 통신하며 리소스를 받아오는데,
브라우저는 보안상 문제(csrf, xss 등)가 되는 경우를 방지하기 위해 SOP(Single Origin Policy)를 적용한다.

SOP는 보안 정책으로 말 그대로 '같은 출처에서만 리소스를 공유할 수 있다' 라는 규칙을 가진 정책이다.

단, 아래 경우에는 SOP가 적용되지 않는다.
- <img> 태그로 다른 도메인의 이미지 파일을 가져오거나
- <link> 태그로 다른 도메인의 CSS를 가져오거나
- <script> 태그로 다른 도메인의 javascript를 가져오는 것
- 그 외에도 <video> <audio> <object> <embed> <applet> 태그

만약 리소스의 출처가 자신의 출처와 다를 경우, 웹 애플리케이션은 헤더에 자신의 출처를 담은 필드 Origin을 포함한 HTTP 요청을 보내게 되고,
응답 헤더의 Access-Control-Allow-Origin의 값과 Origin의 값을 비교하여 허용된 출처인지를 판단하는데, 이러한 메카니즘이 CORS이다.

CORS는 브라우저에서 구현되어 있기 때문에 허용되지 않은 출처로 리소스를 요청하더라도 서버는 정상적으로 응답을 하고,  
전달받은 응답을 사용할지 말 건지는 브라우저가 결정하게 된다.  

 

출처의 범위
아래 그림을 참고하여 Protocol, Domain Name, Port까지 동일하다면 동일한 출처로 적용된다.

출처: https://hanseul-lee.github.io/2020/12/24/20-12-24-URL/

 

❗️ 주의❗️

로컬 환경에서 로컬의 리소스를 요청할 경우 Origin은 null로 적용이 되기 때문에 CORS 에러가 나게 된다.

---

📌 CORS 해결방법

첫번째 방법은 서버에서 Access-Control-Allow-Origin에 허용 가능한 출처를 세팅해주는 방법이다.
이 방법이 가장 정석이라고 한다.

ex) Access-Control-Allow-Origin : https://xxxx.xxxx.xxx

값으로 *을 적용하여 모든 출처를 허용할 수도 있지만 그렇게 되면 보안상의 문제를 피할 수 없기 때문에 권장하지 않는다.

 

 

두번째 방법은 webpack dev server를 세팅해 주는 것인데
이 부분은 내가 아직 webpack을 잘 다루지 못하기 때문에 잘 설명한 블로그 링크를 남기려고 한다.

 

https://evan-moon.github.io/2020/05/21/about-cors/#webpack-dev-server%EB%A1%9C-%EB%A6%AC%EB%B2%84%EC%8A%A4-%ED%94%84%EB%A1%9D%EC%8B%B1%ED%95%98%EA%B8%B0

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

---

프로젝트를 하며 CORS 에러를 만날 때마다 정리해야지라고 마음먹었었는데 이제야 정리하게 되었다.
그동안 만난 에러들을 서버와 연결하면 해결이 되어서 따로 해결방법을 신경 쓰지 않았었다. 😭 (반성...) 😭

아직 CORS의 세세한 작동 부분까지 다루지는 않았지만 이 부분은 내가 앞으로 개발을 하며 CORS 에러를 만나게 되면서 해결방법을 적용해보고, 이것 저것 뜯어보면서 조금 몸으로 와닿게 되면 그때 좀 더 체계적으로 정리하려고 한다.
오늘도 나는 성장했다! 💪

---

참고

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

https://velog.io/@takeknowledge/%EB%A1%9C%EC%BB%AC%EC%97%90%EC%84%9C-CORS-policy-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-3gk4gyhreu

로컬에서 CORS policy 관련 에러가 발생하는 이유

---