Unexpected end of input 错误，求教

看不到图

说明没获取到正确的 JSON 文件，看 Network

你为啥会去用 HTTP GET 请求一个本地 json 文件?
你知道 fetch 是用来干嘛的吗

直接在浏览器访问 http://your-hostname/constant/ceshi.json 有返回的话，fetch 也能得到数据，否则就不对

@Opportunity
网络里面有这个文件，状态是 200

@NessajCN
那我应该用什么方法读取本地的 json 文件呢？
有没有什么函数之类的？

@humbass
我现在是在本地测试的，所以可能不能用网址去访问。
如果是用本地地址去访问的话，没问题。

需要展示完整的 html 文件才知道，截图里不完整

比如控制台错误里的 15 行 30 列到底对应代码的哪位置？

@lisongeee
“.then((response) => response.json())”这个是第 15 行。

@pcxys fetch 基于浏览器的，必须是 http(s)，不支持本地，不知道吗？初学者？

当然 node.js 也有 fetch ，那个可以直接读取

测试了一下，确实出现了这个错误

因为你设置了 mode: 'no-cors', 导致拿到的 content 是 '' 空字符串，所以发生 json 解码错误

去掉上面的 mode 参数会报另外的错，意思是 fetch 只支持 chrome-extension, chrome-untrusted, data, edge, http, https, isolated-app. 这类协议

那你就别用 file 协议访问

@pcxys fetch 不是用来读本地文件的，或者说浏览器就不支持读本地文件，不然网站上随便来个脚本就能读你电脑里的文件不是乱套了吗
你要读这个 json ，首先是把这个文件用 http server 开放出去，也就是能在浏览器里用 http://xxx/xxx.json 访问到，这样浏览器在从其他地方 fetch 这个文件就是合法的。具体到你这个例子，我假设你是用 nginx 当服务器，那你就把 json 文件放到 index.html 同目录，然后再在 index.html 里 fetch("xxx.json")应该就能获取到了

@humbass
确实是初学者，如果不能用，我应该用什么函数去调取本地的 json 比较好？

@lisongeee
对，如果取消掉就会出现好像是跨域的错误。
那你有什么好的办法或者函数可以使用嘛？

@NessajCN
那大家一般如何去调取本地的 json 文件的呢？有什么好用的函数吗？

@pcxys #15 调不了，开个本地服务吧，或者使用浏览器最新支持的 native fs api ，不过这个就算了

使用 vscode 开发的话，下载一个 Live server 插件，它会在本地开启一个服务器，应该对你有帮助

看下来应该是 response.json 方法报错了，响应结果无法 json 序列化，加个 try catch 就行了

@pcxys 本地何不直接 import

不知道你想什， json 是之後也是本地的，是後是求上的。
如果是後求上的，但是你在想，你可以看看 mock 方面得。
如果後都是不需要求後端的，直接 import

请部署到 HTTP 服务器再打开，fetch 和 XHR 不支持本地（ file://）调用，并且没有任何 workaround ，包括 mode: 'no-cors'也不会解决你的问题。

vs code 用 live server 插件模拟服务器，把那个 json 文件放在项目里面。这样你本地读取就没有问题了 初学者的话善用 ai 可能会比问大家更有帮助一些 加油哈

@pcxys 答案就是: 在浏览器中的 html 脚本读不到那个文件，你需要启用一个 http server.

@pcxys #15 require('/tmp/xxx.json')。 /tmp 替换成你的文件实际路径

@pcxys 如果是要调用本地的文件，不管啥类型，只有通过 input type="file" （可以用脚本）让用户选择对应的文件，然后你才能拿到用户选择的文件的只读访问权限。
或者通过 File System API https://developer.mozilla.org/en-US/docs/Web/API/File_System_API 要求用户授权这个文件或者文件夹的权限，然后就能读取或写入文件，但这个 API 仅限于安全上下文，比如 https 下。

且是实验性的