本地运行HTML调用fetch请求json文件报NetworkError网络错误

直接通过file://协议打开本地HTML文件时，浏览器同源策略会拦截跨文件的fetch请求，报错里的CORS request not http已经明确说明原因：fetch API仅支持HTTP/HTTPS等标准网络协议的资源请求，不支持直接读取本地file路径下的文件。
另外你的代码本身存在三处书写错误，就算解决跨域问题也无法正常运行：

• fetch请求的文件名为temp.json，但你本地存储的JSON文件实际名为data.json，文件名不匹配
• 响应解析后赋值的变量名为dat，最后取值时传入Object.values()的变量是未定义的data，变量名不匹配
• 直接打印async函数的返回值只会得到Promise对象，拿不到最终解析的结果

方案1：本地启动静态HTTP服务（推荐，全环境兼容） #

该方案不需要修改浏览器安全配置，兼容Firefox、移动端Chrome等所有浏览器，是最规范的解决方式：

1. 先修正代码错误，将index.html内容改为如下：

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

确保修正后的index.html和data.json放在同一个文件夹内。
2. 在该文件夹路径下启动本地静态服务，任选一种你本地有对应环境的方式即可：

• 已安装Python3：执行命令python -m http.server 8000
• 已安装Python2：执行命令python -m SimpleHTTPServer 8000
• 已安装Node.js：先执行npm install -g serve完成全局安装，再执行serve .启动服务

3. 桌面端浏览器访问http://localhost:8000即可正常运行；移动端测试时保证手机和电脑连接同一WiFi，通过电脑的局域网IP替换localhost访问即可，不会出现跨域报错。

方案2：JSON数据内嵌（零配置，适合纯离线本地场景） #

如果不想启动本地服务，直接把JSON数据写入JS代码中即可，不需要发起fetch请求，双击HTML文件就能直接运行，不存在跨域问题，修改后的index.html代码如下：

<!doctype html>
<html>
    <head>
    </head>
    <body>
        <script>
            const data = {
                "1": "One",
                "2": "two",
                "3": "Three"
            }
            console.log(Object.values(data));
        </script>
    </body>
</html>

不建议通过修改浏览器安全配置、关闭跨域限制的方式解决问题：这类操作仅在桌面端部分浏览器生效，移动端Chrome没有对应的配置入口，同时会降低浏览器安全性，带来不必要的风险。

内容的提问来源于stack exchange，提问作者Eagle