24/01/17 TIL __ CORS (Cross Origin Resource sharing)

\

 

 

오늘은 cors 에 대해 알아보았다. 

종종 마주쳤던 애였는데, 문제가 되진 않아서 넘어간 경우가 있었는데, 

오늘은 한번 알아보고자 찾아보았다. 

 

 

🦊 cors 

cross origin resource sharing 이라는 말인데, 

다른 출처의 리소스를 허용하는 정책이다.
이것이 나온 이유는 안전하게 통신하기 위해서 인데, 
서로다른 어플리케이션이 마음껏 소통하는건 꽤 위험한 일이라 정보 탈취의 위험성이 높아진다. 

(sop의 예외조항중 하나이기도 하다.)
url의 구성요소 중 sheme, host, port 이 3가지만 동일하면 출처가 서로 같다고 판단한다.
그리고 이 출처를 비교하는 로직은 브라우저에 있어서 따로 작성하지 않아도 cors 정책이 적용된다. 

(요청-브라우저 응답분석-cors 위반 안하면 응답, 

아니면 버림)

브라우저가 판단하는 과정을 좀더 살펴보면,
일반적으로 preflight방식을 사용하는데 
우리가 어떤 요청을 보내면, 브라우저는 서버에게 바로 요청을 보내지 않는다. 
먼저 예비요청을 보내서 확인하는데, 

이때  서버는 어떤걸 허용하고, 어떤걸 금지하는지 에 대한 정보를 담아서 브라우저에게 다시 보낸다. 

이후 브라우저는 예비요청 보낸 것과, 응답으로 온 허용 정책을 비교해서 안전하다면, 

같은 엔드포인트로 본요청을 보낸다. 서버가 응답하면 이제 드디어 응답 데이터를 js에게 넘긴다. 

(simple은 예비요청이 없다는 게 다름.)

 

cross origin resource sharing 오류를 해결하려면, 

백엔드 서버의 응답 헤더에 올바른 access-controll-allow-origin이 내려오도록 세팅해야 한다. 

webpack-dev-server 라는 것은 프록싱 옵션을 사용하여 

자체적으로 해결하는 방법도 있지만, 이 방법은 로컬 개발 환경에서만 통하는 방법인데다가, 

근본적인 문제 해결 방법이 아니기 때문에 

결국 운영 환경에서 CORS 정책 위반 문제를 해결하기 위해서는 백엔드 개발자의 도움이 필요할 수 밖에 없다.

 

 

 

 

출처

https://evan-moon.github.io/2020/05/21/about-cors/