求教各位大佬,这个问题是咋回事,google 上找了一天,也没有找到好的办法。

1
apples01 2024-10-26 13:38:04 +08:00
看不到图
|
2
Opportunity 2024-10-26 14:37:53 +08:00
说明没获取到正确的 JSON 文件,看 Network
|
3
NessajCN 2024-10-26 14:44:38 +08:00 via Android
你为啥会去用 HTTP GET 请求一个本地 json 文件?
你知道 fetch 是用来干嘛的吗 |
4
humbass 2024-10-26 15:03:49 +08:00
直接在浏览器访问 http://your-hostname/constant/ceshi.json 有返回的话,fetch 也能得到数据,否则就不对
|
5
pcxys OP @Opportunity
网络里面有这个文件,状态是 200 |
8
lisongeee 2024-10-26 15:18:48 +08:00
需要展示完整的 html 文件才知道,截图里不完整
比如控制台错误里的 15 行 30 列到底对应代码的哪位置? |
10
humbass 2024-10-26 15:48:30 +08:00
|
11
lisongeee 2024-10-26 15:56:30 +08:00
测试了一下,确实出现了这个错误
因为你设置了 mode: 'no-cors', 导致拿到的 content 是 '' 空字符串,所以发生 json 解码错误 去掉上面的 mode 参数会报另外的错,意思是 fetch 只支持 chrome-extension, chrome-untrusted, data, edge, http, https, isolated-app. 这类协议 那你就别用 file 协议访问 |
12
NessajCN 2024-10-26 16:19:09 +08:00 via Android
@pcxys fetch 不是用来读本地文件的,或者说浏览器就不支持读本地文件,不然网站上随便来个脚本就能读你电脑里的文件不是乱套了吗
你要读这个 json ,首先是把这个文件用 http server 开放出去,也就是能在浏览器里用 http://xxx/xxx.json 访问到,这样浏览器在从其他地方 fetch 这个文件就是合法的。具体到你这个例子,我假设你是用 nginx 当服务器,那你就把 json 文件放到 index.html 同目录,然后再在 index.html 里 fetch("xxx.json")应该就能获取到了 |
17
daozun 2024-10-26 17:26:17 +08:00
使用 vscode 开发的话,下载一个 Live server 插件,它会在本地开启一个服务器,应该对你有帮助
|
18
dumbass 2024-10-26 17:52:33 +08:00 via iPhone
看下来应该是 response.json 方法报错了,响应结果无法 json 序列化,加个 try catch 就行了
|
20
markgor 2024-10-26 18:09:54 +08:00
不知道你想幹什麼,這個 json 是發佈之後也是本地的,還是說發佈後是請求線上的。
如果是發佈後請求線上的,但是你現在想調試,你可以看看 mock 這方面得。 如果發佈後都是不需要請求後端的,直接 import |
21
AV1 2024-10-26 18:54:44 +08:00
请部署到 HTTP 服务器再打开,fetch 和 XHR 不支持本地( file://)调用,并且没有任何 workaround ,包括 mode: 'no-cors'也不会解决你的问题。
|
22
ziyanghua 2024-10-26 19:05:25 +08:00
vs code 用 live server 插件模拟服务器,把那个 json 文件放在项目里面。这样你本地读取就没有问题了 初学者的话善用 ai 可能会比问大家更有帮助一些 加油哈
|
25
jinliming2 2024-10-27 11:10:42 +08:00 via iPhone
@pcxys 如果是要调用本地的文件,不管啥类型,只有通过 input type="file" (可以用脚本)让用户选择对应的文件,然后你才能拿到用户选择的文件的只读访问权限。
或者通过 File System API https://developer.mozilla.org/en-US/docs/Web/API/File_System_API 要求用户授权这个文件或者文件夹的权限,然后就能读取或写入文件,但这个 API 仅限于安全上下文,比如 https 下。 |
26
jinliming2 2024-10-27 11:12:01 +08:00 via iPhone
且是实验性的
|