CORS란 무엇인가? (초간단 해결방법 href.location)

Cross Origin Resource Sharing

즉, 동일 출처가 아닌 다른 출처에서 자원을 요청할 경우 응답을 방지하는 웹 정책이다.

 

출처의 기준은 프로토콜 (http), 호스팅 (IP주소), 포트번호 (:3001)까지 같아야지만 서로 동일 출처로 처리한다.

 

이 외 다른 출처가 요청한 자원에 서버가 응답을 하게 될 때의 보안상 문제는 해커가 의도적으로 비슷한 사이트를 구현해 놓고 리다이렉트를 통해 개인정보 등을 탈취할 수 있는 위험이 있다.

 

---

CORS 이슈 간단 해결 사례

 

/download로 URL 입력을 해서 바로 드롭박스 리다이렉트는 정상적으로 진행되어 다운로드가 됐지만, 프론트엔드에서 버튼을 눌러서 백엔드로 요청을 보내서 다운로드 url에 요청을 보내는 것은 localhost to dropbox의 Cross Origin이기에 계속해서 실패했다. 그리고 이 문제는 드롭박스 서버 측에서 CORS를 허용하지 않기 때문에 발생하는 현상이다.

 

생각보다 해결 방법은 간단했는데 그냥 location.href를 통해 현재 위치한 페이지에서 /download 페이지로 이동했고,
이동했을 때, GET요청에 의해 서버에서 리다이렉트를 통해 드롭박스에 접근, 다운로드가 완료됐다.

 

요약하자면, 기존에 존재하는 서버 단의 API가 있다면, 즉 res.redirect 등으로 응답이 준비되어 있다면,

프런트엔드에서 간단하게 그 API로 요청을 보내고, 백엔드에서 redirect를 처리해서 프런트엔드로 보내준다.

 

그러니 백엔드 서버에 요청을 처리하는 API 없이 그냥 다른 웹사이트 주소 redirect 걸어놓으면 CORS 정책에 의해 막힐 가능성이 크다.