Fetch API cannot load file:/xxx.json. URL scheme "file" is not supported.

JS를 연습할겸 드림코딩 엘리의 '쇼핑몰 미니게임 클론코딩 & 코드 리뷰' 를 실습했다. 

Fetch API를 이용해 Json의 데이터를 받아와 HTML 사용하는 로직을 작성하는 중 오류가 발생했다. 

//Fetch the items from ths JSON file
function loadItems() {
     return fetch('data/data.json')
     .then(response => response.json()) //json으로 변환
     .then(json => json.items); //json 안의 items를 return
}

 

이유를 찾아보니 index.html 파일을 그냥 더블클릭해서 사용해서 그렇다고 한다. 

fetch api가 제대로 작동하기위해선 실제 포트위에 띄워놓아야 한다고 한다.

VS code에서 live-server을 설치하고 실행하려는 파일 위치에서 Go Live를 누르면 실행된다. 

 

참고 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

 

Reason: CORS request not HTTP - HTTP | MDN

https://academy.dream-coding.com/courses/take/mini-shopping/downloads/17403873

Dream Coding

"Icon made by Pixel perfect from www.flaticon.com"