[CORS] CORS 오류 해결하는 방법 (자바스크립트/api/CORS/리액트/cors-anywhere 403 forbidden/cors 우회)

외부 api를 요청하여 프로젝트를 하던 중 오류가 생겨서 api를 받아올 수 없었다.

크롬에 뜨는 에러상황을 가지고 원인을 검색해보니 해당 오류는 CORS 오류였다.

나는 리액트로 프로젝트를 진행 중이었기 때문에 검색을 하던 중 package.json에 proxy를 추가하는 방법을 통해 해결할 수 있었다. (아래 글 참조)

https://nyang-in.tistory.com/237

리액트 CORS 오류 해결 방법

그러나 이 방법은 개발중에는 먹혔지만 배포후 사용해보니 되지 않았다. 

그래서 방법을 검색했더니 백엔드를 구축해야 했는데 그 방법은 원치 않았으므로 cors-anywhere을 통해서 우회하는 방법을 찾아냈다.

 

이렇게 원하는 URL 앞에 해당 cors-anywhere 주소를 붙여주면 되는 방법이었는데, 이것도 403 에러가 뜨면서 forbidden이라고 떴다.

https://github.com/Rob--W/cors-anywhere/issues/301

PSA: Public demo server (cors-anywhere.herokuapp.com) will be very limited by January 2021, 31st · Issue #301 · Rob--W/cors-an

이 주소로 들어가보니 cors-anywhere이 남용되고 있어서 서비스가 2021년 2월 1일부터는 직접 https://cors-anywhere.herokuapp.com/에 들어가서 방문자가 사용하겠다고 데모 버튼을 눌러서 잠금을 해제해야만 사용할 수 있다고 한다. 일단 직접 사이트에 방문하여 잠금을 해제한 후 배포해보았더니 돌아가긴 하는데 언제까지 허용이 될지는 모르겠다. 당장은 되더라도 다시 또 잠금을 해제해야할 수도 있을 것 같다. 

또 풀릴 수도 있으니 대안을 찾아보았는데 덧글에서 https://cors.bridged.cc/라고 대책이 있다고 해서 cors-anywhere 대신 이 주소를 붙여서 axios로 api를 요청했더니 잘 되는 것을 확인할 수 있었다.

나와 같은 고민을 가지고 검색으로 들어온 분들에게 도움이 되었으면 한다!