Loading...
墨滴

浪淘沙

2021/08/17  阅读:33  主题:前端之巅同款

IOS 端 H5 应用无法发起请求,请求状态码为0,错误描述为request:fail

【已解决】(uni-app)IOS 端 H5 应用无法发起请求,请求状态码为0,错误描述为request:fail

文章目录

1️⃣ 问题描述

uni-app 项目 发布为H5 应用,在安卓环境下没有问题,在部分低版本的 IOS 手机中发生 request:fail 错误。

请求拦截器报错和 vconsole 报错如下图所示,通过图片可知请求进入了fail 回调,错误描述为:request:fail。 同时请求状态码为: 0

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RMoH8m1s-1629188374532)(https://secure.wostatic.cn/static/3PMVFPWByoMWZeT4rDk1PW/441d463e-1430-4c94-9ad8-e6fe6066b422.jpg)] 在这里插入图片描述

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却有了更多的认识,对该问题的解决方案也有了大致的思路。

  1. 跨域,options预检不通过

  2. 请求头配置问题

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众号"前端知识营地",点击关注,获取更多优质有趣的内容。

🔴 关注公众号 🔴 访问原文链接


(完)

浪淘沙

2021/08/17  阅读:33  主题:前端之巅同款

作者介绍

浪淘沙