调用fetch API无法从jsonplaceholder.typicode.com获取数据求助

• 最常见的原因是运行环境不符合要求：你大概率是直接双击打开本地HTML文件，使用file://协议运行代码，该协议下浏览器的安全策略会限制fetch请求，origin为null的请求会被jsonplaceholder的跨域规则拦截。课程讲师是通过本地HTTP服务（如VS Code Live Server、http-server等）运行代码，使用http://localhost协议，符合跨域请求要求。
• 网络拦截问题：你当前的网络环境开启了代理、VPN、防火墙，或者安装了广告拦截、隐私防护类浏览器扩展，导致请求被拦截无法正常发出。
• 域名解析异常：本地DNS解析错误，无法正常访问jsonplaceholder.typicode.com域名。

1. 更换运行方式：不要直接打开本地HTML文件，使用本地HTTP服务运行代码：
   • VS Code用户可以安装Live Server插件，右键HTML文件选择「Open with Live Server」，通过http://localhost开头的地址访问运行。
   • 也可以全局安装http-server npm包，在项目目录执行http-server命令启动本地服务后访问。
2. 排查网络和扩展：直接在浏览器地址栏输入https://jsonplaceholder.typicode.com/users，如果无法正常返回JSON数据，先关闭代理、VPN，临时禁用所有浏览器扩展后重试。
3. 增加错误捕获逻辑：在代码中添加错误捕获，可直接定位具体报错原因，参考代码如下：
   • Promise写法优化：

   fetch('https://jsonplaceholder.typicode.com/users')
     .then(resp => resp.json())
     .then(console.log)
     .catch(err => console.error('请求报错信息：', err))
   

   • async function写法优化：

   async function fetchUsers() {
     try {
       const resp = await fetch('https://jsonplaceholder.typicode.com/users')
       const data = await resp.json()
       console.log(data)
     } catch (err) {
       console.error('请求报错信息：', err)
     }
   }
   fetchUsers()
   

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