React.js에서 CORS 처리하기

동일 출처 정책으로 인해 자바스크립트는 동일한 서버 도메인에서 가져온 정보만을 처리할 수 있다.

즉 외부의 서버 api에 접근하려면 별도의 처리가 필요하다. 그 별도의 처리가 cors 처리다.

대부분의 오픈 api들은 이 처리가 되어 유포되지만 간혹 cors 처리가 되어있지 않은 api에 접근해야 하고, 프론트엔드로만 처리해야 하는 상황이라면 아래의 방법을 사용하면 된다.

1. 크롬 익스텐션 사용하기

위 주소로 가서 맘에 드는 익스텐션을 설치 후 사용하자.

단, 기능이 ON 되어 있을 때 웹에 약간의 장애가 나타날 수 있으니 주의.

package.json 파일에

"proxy" : "https://접근하려는.api.주소/"

를 추가하고 데이터 fetch 구문은

axios.get("https://접근하려는.api.주소/item");

에서

axios.get("item");

으로 수정하여 작성한다.