【已解决】（uni-app）IOS 端 H5 应用无法发起请求，请求状态码为0，错误描述为request:fail
1️⃣ 问题描述
uni-app 项目 发布为H5 应用，在安卓环境下没有问题，在部分低版本的 IOS 手机中发生 request:fail 错误。
请求拦截器报错和 vconsole 报错如下图所示，通过图片可知请求进入了fail 回调，错误描述为：request:fail。 同时请求状态码为： 0
2️⃣ 问题分析
🔸 2.1 分析依赖问题
由于在之前的 H5 项目中均为发生过类似错误，以为是项目安装的依赖有问题，因此创建了一个纯净的 uni-app 项目并编译为 H5 发现在低版本IOS 问题依旧。
问题并非依赖引起
初步认为是 uni-app 框架有问题，第一时间官方提交了 bug 反馈。bug反馈地址如下：
🔸 2.2 分析uni-app版本问题
如前面所说，在此前的H5 应用中尚未发现类似问题，通过比较两个应用发现 uni-app 版本不一致，因此怀疑是否是 uni-app 版本升级带来的问题。将uni-app 版本回退到线上正常版本（我这里使用的是cli 版本的uni-app），版本回退之后发现问题依旧存在，故也不是uni-app 版本升级导致的问题。
问题并非 uni-app 版本导致
🔸 2.3 引入vconsole 进一步分析问题
- 安装 vconsole
npm install vconsole
- 在main.js 首行 中引入vconsole
// main.js
// #ifdef H5
//[ Gmy 2021-08-16 15:35:52 ] 集成vconsole
import VConsole from "vconsole";
const vConsole = new VConsole();
Vue.use(vConsole);
console.info("vconsole-info-测试");
// #endif
通过 vconsole 即发现了上图描述的问题，请求状态码为 0 ，后端为无任何响应。发现问题所在立即联系后端查看日志，发现后端连接口的调用记录都没有。同时随着
🔴看来问题还是发生在请求身上
3️⃣ 进一步定位问题
通过步骤2️⃣ 问题分析对错误有了大致的定位，经过多轮测试，终于有了重大发现：
🔴 当设置了请求头 hearder 之后发起请求就会导致错误，而如果取消请求头则能正确请求到后台，同时能正确返回后台数据。
但是，由于接口处处需要用到token校验，不加请求头这种裸奔方式肯定是不行的。接下来就是寻找解决办法和继续试错。此处省略百度查找过的上百篇文章 网上的文章真的是良莠不齐。不过通过大量的文献阅读，对请求状态码为0却有了更多的认识，对该问题的解决方案也有了大致的思路。
-
跨域，options预检不通过
-
请求头配置问题
4️⃣ 解决办法
🔸 4.1 跨域解决
大部分文章都提及跨域问题，不过我的项目的确跨域了，前端项目部署到A服务器 ，而后端代码则是部署到B服务器 。那既然大家都说是跨域问题，那我就把前后端项目部署到一台服务器好了。经测试这种方案确实可行。看来的确和跨域有关。
🔴的确和跨域有关！
不过令人纳闷的是为什么只有部分手机（主要指低版本的IOS 手机）会发生跨域，而大部分安卓手机，和浏览器都没有这个问题呢？？
既然是跨域，随即联系后台设置CORS 允许跨域，不过诡异的事情又发生了，当后台完善CORS 设置之后，我将前后端项目分开部署该问题有一次出现了，真是见了鬼了！！！
🔸 4.2 修改请求头配置
根据参考文献的另一种解决思路：
因为有 自定义请求头 存在，所以先会进行options，options后服务端返回了，但是前端浏览器没有进行post，因为后台设置的headers为 * ，可能ios13/安卓10一下浏览器识别不出来后台允许有自定义请求头的存在。 所以后台将 Access-Control-Allow-Headers: * 修改为 Access-Control-Allow-Headers: accept, content-type, origin, custom-header 即将自定义请求头和默认请求头全都写出来。
参考该解决方案完成后台配置，错误完美解决。
5️⃣ 总结
（uni-app）IOS 端 H5 应用无法发起请求，请求状态码为0，错误描述为request:fail 可行解决方案为：
| 方案 | 说明 |
|---|---|
| 取消header | 非常low 的解决办法，不推荐使用 |
| 将前后端项目部署到一起，解决跨域引起的问题 | 一般解决办法 |
| Access-Control-Allow-Headers 列出自定义请求头和默认请求头，而不是使用 * | 比较完美的解决办法 |
本文同步发布于G众号"前端知识营地"，点击关注，获取更多优质有趣的内容。
🔴 关注公众号
🔴 访问原文链接
(完)
