React useEffect中使用fetch调用API出现JSON.parse意外结束报错如何解决

问题原因 #

你遇到的报错是代码中配置了mode: "no-cors"导致的：

• fetch开启no-cors模式后，拿到的响应是**不透明（opaque）**类型，前端脚本无法读取响应的任何内容，也无法判断请求是否成功。你尝试对空的响应内容调用res.json()做JSON解析，自然就触发了JSON.parse的语法错误。
• Postman属于独立客户端工具，不受浏览器同源策略的限制，所以相同的请求可以正常拿到返回结果。

解决方案 #

1. 首先删除fetch配置中的mode: "no-cors"参数，默认的cors模式即可。
2. 配置删除后如果出现跨域报错，说明该API没有开放前端直接跨域调用的权限，有两种解决方式：
   • 联系API提供方，将你的站点域名添加到API的CORS白名单中
   • 新增一层服务端代理：前端请求你的服务端接口，由服务端发起请求到该公开API，再将结果返回给前端，服务端请求不受同源策略限制
3. 额外补充：你的现有代码中拿到响应后没有修改isLoading状态，页面的加载提示不会切换，记得在获取数据的回调中补充setLoading(false)。

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