CORS란 무엇인가 : 교차 출처 리소스 공유 - 사이드 프로젝트 진행 중 만난 이 친구

예전에도 공공 API를 호출해서 데이터를 웹 사이트에 보여주는 코드를 짜다가 이 CORS 친구를 마주한 적이 있었다. 주말동안 최근에 시작한 가상화폐 거래소 클론 코딩을 위해 빗썸 OPEN API를 불러오던 중에 또 이 친구를 마주했다. 아마 Vue를 처음 사용하면서 SPA로 구성하는 와중에 발생시킨 이슈라고 생각한다. (그래서 이제 어떻게 해결할거니?) 그 때는 잘 이해가 가지 않았는데 여러 번 보다 보니 그 때보다는 이해가 되고, 무엇보다 이렇게 글을 남겨 공부를 하면 좀 더 이해가 잘 되지 않을까 싶어서 정리해보려고 한다.

일단 Fetch API를 활용하여 데이터를 호출하면 이런 에러를 마주할 수 있을 것이다.

읽어보면 “너가 요청한 오리진 주소는 막혔어. CORS를 헤더에 담아서 요청해” 정도로 요약할 수 있겠다.

[CROS란]

CORS란 ‘Cross Origin Resource Sharing’의 약자로 현재 브라우저의 Resource(.html, .css, .js 등)를 갖고 있는 서버가 아닌 다른 서버의 자원을 호출하는 경우를 의미한다. 즉 다른 서버에 있는 데이터를 호출할 때는 보안상의 이유로 일단 차단을 한다는 말씀. 그래서 부득이하게 다른 서버의 자원을 쓰고 싶다면 CORS 요청을 하고 응답을 받아야 한다.

그래서 프론트엔드 단에서 어떻게 해결할 수 있을까 열심히 찾아보았더니 fetch api 호출 시 header에 content-type을 명시해주라고 해서 명시를 해줬다. 그랬더니 prefilght 요청은 응답 상태 200으로 실제 요청이 가능한 것을 확인할 수 있었다.

그러나 실제 요청에서 계속 가로 막히는 상황이 발생했다. 그러나 내가 오픈 API를 받아오는 입장에서, 서버에 직접 들어가서 Access-Control-Allow-Origin 헤더를 직접 붙일 순 없는 노릇이니 결국 요청 헤더와 응답 헤더 사이의 허용 하는 방식으로는 내 문제를 해결하기 어렵다는 결론에 도달했다.

만약 서버와 프론트를 함께 개발하고 있는 입장이라면 이런 에러가 발생했을 때 직접 백엔드를 열어 보며 공부할 수 있어 더 이해가 빨랐을 것이다. 문서들을 여러 개를 읽어보니 결국 서버에서 응답 헤더에 CORS 허용 헤더를 명시하지 않는다면 브라우저는 계속 error를 발생시킬 것이라는 것을 예상할 수 있었다.

결국 Chrome 확장 프로그램을 설치하여 약간의 꼼수로 데이터를 받아오긴 했지만 결국 이건 우회하는 방법이고, 실질적으로 문제를 해결했다고 보기는 어렵다.

짧은 소견으로는 js 파일에서 데이터를 받아온 뒤, 그걸 vue 페이지에서 사용하려고 하다보니 생긴 충돌 같은 데 어떻게 해결할 수 있을지는 좀 더 공부를 해봐야 알 수 있을 것 같다.