Firebase 로컬 환경에서 cors 에러 발생

첫번째 과제로 팀원들과 jQuery를 활용해 간단하게 팀 소개 페이지를 만들었다. 서버와 DB는 firebase를 이용했는데, 나의 로컬 환경에서는 정상적으로 crud가 작동하는데 팀원들의 로컬 환경에서는 아래와 같은 cors 에러가 발생했다.

 

from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

 

뒷 부분을 확인하면 firebase의 cors는 http(s)와 같은 프로토콜에 대해서만 자원 접근을 허용하는 것 같았다. 그래서 확인을 해보니 팀원들은 c드라이브에서 html을 직접 클릭해서 접속했던 것이다.

html 파일을 직접 열었을 때 경로

 

이를 해결하기 위해 모든 팀원의 vs code에 live server를 설치하고 localhost를 통해 페이지에 접속하도록 만들었다.(나는 이미 live server가 깔려 있어서 차이점을 젼혀 못느꼈었다.)

로컬 호스트로 접속했을 때 경로

 

vs code에서 live server의 설치 방법은 아래와 같다. 우선, vs code의 extensions에 들어가서 live server를 검색해서 설치한다. 그리고 index.html 파일을 우클릭해서 나오는 Open with Liver Server로 실행하면 끝!!

vs code

 

live server 실행 방법

 

항상 리액트만 사용해서 리액트 개발 서버를 활용하니 이런 cors 에러가 있는지도 몰랐다. 그래도 앞으로 자주 만날 cors인데 첫번째 에러는 비교적 가볍게 해결해서 기분이 좋았다.