[유튜브 뮤직 클론코딩] 3. Fetch API & Node.js 에서 CORS 해결하기

이제 분리한 API 서버 도메인에 접속되는 걸 확인했으니

프론트서버에서 백엔드서버로 요청을 보내고 응답을 받는 것을 테스트해보기로 했다.

 

현재 프론트에서는 아무런 프레임워크 없이 순수 바닐라 자바스크립트로 만들고 있기 때문에

자바스크립트에서 사용할 수 있는 가장 대표적인 내장 함수인 fetch API 를 사용했다.

 

우선 프론트엔드의 자바스크립트 파일에서 다음과 같은 코드를 작성했다.

이렇게 REST API 를 이용해서 데이터를 받아오고, 받아온 데이터로 화면에 UI를 뿌리는 것이기 때문에

첫번째 포스팅에서 동적으로 UI를 생성하도록 짰던 코드에서 fetch 를 호출하도록 했다.

이것도 일단 테스트니까 서버에서 받은 데이터를 콘솔에 출력하도록 해봤다.

 

다음으로 출력할 데이터를 보내줄 서버에 코드를 작성해야한다.

서버는 Node.js 를 사용해보기로 했다.

자바스크립트를 사용하는데 익숙해지는게 좋겠다는 생각이 들었기 때문이다.

노드는 그냥 작성한 js 파일을 node 명령어로 실행시키기고, nginx에서 로컬로 리다이렉트만 시키면 되는데

플라스크는 미들웨어인 uwsgi 를 이용해야해서 번거롭고 변경사항을 적용하는 것도 오래걸리는게 답답했다.

실제 상용화 된 서비스를 할게 아니라 이건 클론코딩이니까 빨리 빨리 적용된 결과물을 보는게 좋을 것 같아서 노드로 선택했다.

 

아래와 같이 정말 정말 기본적인 코드만 적어보았다.

 

그냥 Hello world 를 돌려주는 코드이다.

이 파일을 실행하고 한번 크롬으로 접속해서 콘솔을 확인해보았다.

 

CORS 오류가 떴다.

이 오류는 어떤 오리진에서 다른 오리진으로 요청과 응답을 주고 받을 수 없게 보안상 막아놓아서 발생한 오류이다.

(오리진 = 호스트 + 도메인 + 포트, 이 셋중에 하나라도 다르면 다른 오리진이다.

나의 경우, 도메인과 포트는 같으나 호스트가 달라 오리진이 다르다.)

 

이 오류를 해결하려면 '다른 오리진한테 내 데이터를 보내줘도 좋다' 는 내용의 헤더를 서버에서 보내는 응답객체에 추가해줘야 한다.

그 헤더가 바로 'Access-Control-Allow-Origin' 헤더 이다.

이 헤더의 값으로 허용할 오리진을 적어주면 되는데, * 은 모든 오리진에 허용한다는 뜻이다.

이제 이걸 저장하고 다시 서버에 들어가보면

 

여전히 안된다.... 내가 여기에서 어이없게 30분을 헤맸었다.

해결은 간단했다 ㅋㅋㅋㅋ

기존에 실행시켜두었던 노드 앱을 끄고 다시 실행시키면 된다.

자바스크립트로 코딩을 하다보니 끄고 다시 실행시키는걸 자연스럽게 까먹고 있었다.

 

CORS 오류 해결!

성공했다 짝짝짝

 

다음에는 홈화면 중 '빠른 선곡' 에 뿌려줄 곡 데이터를 json으로 받아서

UI에 받은 데이터를 넣어주는 걸 해보고자한다.

 

이게 조금 복잡할 것 같아서 걱정이긴하지만,

한편으로는 점점 진짜 실제 서비스를 개발하고 있는 기분이 들어서 설레기도 한다.