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? — angel.bonev
– angel.bonev, Commented Jun 21, 2022 at 11:05
Are you running this from the file system? You should run it using a web server. — chrwahl
– chrwahl, Commented Jun 21, 2022 at 11:09
Running from the file system does not work. Install a web server. I often use http-server - npm in a scenario like this. — chrwahl
– chrwahl, Commented Jun 21, 2022 at 11:17

Eagle · Accepted Answer · 2022-06-21 11:43:45Z

0

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.

answered Jun 21, 2022 at 11:43

Eagle

6110 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related