문제 상황
서버를 따로 사용하지 않고 내 컴퓨터 드라이브에 있는 파일을 바로 웹 브라우저에서 실행시켜 테스트하며 개발하고 있었음.
그러나 같은 로컬에 있는 json 파일을 읽어오기 위해 fetch()를 호출하자 아래의 에러 발생.
Access to fetch at 'file:///프로젝트폴더/data/countries_ko.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.
원인
대체 왜 같은 프로젝트 폴더의 파일을 요청하는데 CORS 에러가 나냐!
그 원인은 웹 브라우저(크롬)가 보안 정책에 따라 웹에서 로컬(내 컴퓨터)에 있는 파일에 접근하는 것을 막고자 로컬 파일 요청 시 위 에러에서 보듯 해당 origin(로컬 파일의 경로)을 null로 설정해버림. 따라서 실제로 같은 경로이더라도 웹 브라우저에서는 다른 경로로 간주되어 CORS 에러가 발생함.
최신 브라우저는 일반적으로 file:/// 스키마를 사용하여 로드된 파일의 출처를 불투명한 출처로 취급합니다. 이는 파일에 동일한 폴더(예시로)에 있는 다른 파일이 포함된 경우, 같은 출처에서 온 것으로 간주되지 않으며 CORS 오류가 발생할 수 있다는 것을 뜻합니다.
MDN Web Docs
해결
해결방법은 서버를 사용하는 것이다. 서버를 사용하면 더이상 로컬의 파일이 아니게 되므로 문제 없음!
나는 VS Code의 확장 프로그램인 Live Server를 사용했다.
사용 방법이 매우 간단하며 새로고침 없이도 파일 변경사항이 자동으로 반영된다.
사용 방법은 Extension 탭에서 Live Server 검색하여 설치, 실행하고자 하는 파일을 우클릭하여 Open with Live Server를 클릭하면 된다.
위와 같은 url로 웹 페이지가 뜨며,
fetch 요청한 json 파일이 문제없이 잘 받아와진다.
