개발자 여러분들 이거 아시죠??
하 벌써 블로그를 적고 있는데도 화가 나네요. 오늘 블로그에서 다뤄 볼 이야기는 바로 CORS입니다.
개발을 하면서 CORS라는 문구가 자주 나타나고 해결을 해보기도 하였는데요.. 근데 정확하게 무슨 개념하고 원리로
이뤄져 있는지는 잘 모르는 것 같더라고요.. 그래서 이번 계기를 통해서 CORS에 대해서 조금 자세히 알아볼까 합니다.
CORS란?
Cross-Origin Resource Sharing 교차-출처 리소스를 공유하는 것이다. 즉 다른 출처
우리가 흔히 많이들 보는 URL에도 다 같은 의미를 가진 것처럼 생각하지만 .. 사실 그게 아니다.
사진으로 보면 이해가 조금 빠를 뜻 하다.
지금 있는 에서 Host까지는 일반적인 Origin 구성이다. + port까지 포함
서버에 기본적으로 접근을 하기 위해서 필요한 것이라고 보면 이해하기 쉽다.
다른 블로그에서 좋은 글을 봐서 가져왔다.
동일 출처 정책?
동일 출처 정책인 Same-Origin Policy는 동일한 출처에 대한 정책를 이야기 합니다.
SOP는 동일한 출처에만 리소스를 공유할 수 있습니다. 즉 같은 동일 출처는 자유롭게 서버에 있는 리소스를 사용하지만,
다른 외부로 부터 받아온 리소스는 사용할 수 없게 되는 것입니다.
A ➡️ A/~~~ ⭕️
A ➡️ B/~~~ ❌
무슨 말인지 아시겠나요?
왜 이러한 개념이 존재하시는지 아시나요?? 당연한 말이지만 당연히 보안성 문제 때문이라고 합니다.
외부로부터 오는 악의적인 리소스를 사전에 미리 방지하기 위해서 이러한 개념이 생겼습니다.
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏
악명 높은 CORS 에러 메세지 웹 개발을 하다보면 반드시 마주치는 멍멍 같은 에러가 바로 CORS 이다. 웹 개발의 신입 신고식이라고 할 정도로, CORS는 누구나 한 번 정도는 겪게 된다고 해도 과언이
inpa.tistory.com
CORS 해결해주세요.
하 나 프론트개발자인데 이거 CORS 어떻게 해결하냐 ..
우리 프론트엔드 개발자님들 기준으로 한번 간단하게 이야기를 해볼까해요 .. (전국 프론트개발자님들 화이팅입니다! ..)
proxy 서버 사용하기
프록시 서버 혹시 들어보셨나요? 클라이언트와 서버간의 통신을 도와주는 중간의 역할? 이라고 보면 이해하기 쉽습니다.
본인이 요청하고자 하는 URL 앞에 proxy 서버를 같이 붙혀서 보내준다면 해결할 수 있습니다.
예시로는 .. https://(proxy-server)/~~~.com 이런 식으로요!! 이해가 되셨나요??
HTTP 응답헤더에 Access-Control-Allow-Origin : * 를 설정주면 됩니다.
라이브러리 사용하기
제가 읽은 좋은 자료 공유해 드려요!!!
[http-proxy-middleware] proxy사용해서 CORS에러 해결하기
프로젝트 중 imageURL을 사용하여 다운로드 버튼을 누르면 이미지가 다운로드할 수 있게끔 하는 기능을 만들어야 했다. 위 기능을 구현하면서 겪은 어려움은 크게 2가지였다. 1. 서버에서 오는 image
kimyk60.tistory.com
느낀 점
CORS 중에서 스크립트 방면으로 생기는 에러도 조금 더 자세히 조사를 해보고 싶고 관련 서버적인 내용도 담고 싶다.
하지만 여러 자료를 보면서 공부를 해보았는데 어려운 내용이 많아 조금 더 자세히 학습할 필요가 있는 거 같다.
나는 내가 블로그를 정리할 때 모르는 내용은 다 이해를 하고 작성하는 타입이라 내가 알고 습득한 내용만 작성을 한다.
더 추가적으로 CORS 세션은 추가할 예정이다. 진짜 아직 배울 것 너무나도 많다 .. 😥