Got error `NetworkError when attempting to fetch resource` when fetching json file

Question

I know this question is already there in stack overflow, but it's not relevant for my issue. I didn't get a solution.

I have two file index.html and data.json.

My code:

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <script>
            async function fun(){
                const res = await fetch('temp.json');
                const dat = await res.json();
                return      (Object.values(data));
            }
            console.log(fun());
        </script>
    </body>
</html>

{
"1": "One",
"2": "two",
"3": "Three"
}

I got the error mentioned in the title in my browser (firefox and mobile chrome). Console:

Promise { <state>: "rejected", <reason>: TypeError }
<state>: "rejected"
<reason>: TypeError: NetworkError when attempting to fetch resource.
<prototype>: Promise.prototype { … }

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///home/kashyap/Desktop/data.json. (Reason: CORS request not http).

Does this answer your question? [Chrome - Fetch API cannot load file. How to workaround?](https://stackoverflow.com/questions/49971575/chrome-fetch-api-cannot-load-file-how-to-workaround) — angel.bonev, Jun 21 '22 at 11:05
Are you running this from the file system? You should run it using a web server. — chrwahl, Jun 21 '22 at 11:09
Running from the file system does not work. Install a web server. I often use [http-server - npm](https://www.npmjs.com/package/http-server) in a scenario like this. — chrwahl, Jun 21 '22 at 11:17

score 0 · Accepted Answer · answered Jun 21 '22 at 11:43

As mentioned by @chrwahl in comment, we need to use a web server to solve this issue instead of file system. Because of security reason firefox doesn't allow that (not sure about other browsers).

I have moved the files to root folder of my web server (apache)(/var/www/html/ in linux and htdocs folder in Xamp).

The error has gone and promise has fulfilled.

Got error `NetworkError when attempting to fetch resource` when fetching json file

1 Answers1