记一次使用 axios 在 IOS12 下 post 无效的问题

3,366 阅读2分钟

遇到这个问题时自己网上查了很多资料,询问了同事,但都没有找到合适的解决方法。最后花了点功夫解决了,特此记录下来。

在做项目时发现一个很奇怪的问题,同样的页面在 ios 12.3 和 12.4 版本上(反馈已知的两个版本)会出现请求不到任务的情况。在测试了 ios 其他更高版本系统和安卓 PC 都未发现这种情况。

因为是 H5 页面 ,只好使用 vconsole 来进行调试。
本地调试时发现,post 请求全部进入到响应拦截里,并且被 error 捕获

error => {
    console.log('error', error);
    console.log('1', error.toString(), navigator.userAgent);
    return Promise.reject(error.response.data) // 返回接口返回的错误信息
  }

image.png

查看对应的网络 network 面板,可以看到 请求的 statu 竟然为 0。很诡异

image.png

在网上看的文章试了修改请求 header content-type 的方法,都不能解决问题。

发现该问题有被 axios github issue 记录下来。地址 here

在这个 issue 下面有个回答

image.png

反馈给大佬 leader , 修改了后端 Access-Control-Allow-Headers 不再是 * 通配符。结果请求都成功了。

思考了这个问题,应该就是 ios 这个系统对跨域请求的限制过于严格,竟然限制这个字段不可使用通配符。
在进行复杂请求时,会先向服务器发起预检请求 options ,收到响应 headers 有返回 Access-Control-Allow-Headers 字段,发现是 * 通配符,则禁止之后的 post 请求继续发送,所以 status 都是 0。没想到竟然跟跨域请求有关,更没想到 options 预检请求这个过程还会出问题。

但是又有个疑问,跨域拦截明明是浏览器内核做的事情,为什么跟 ios 系统有关呢?
原来是 苹果公司在 App Store 的政策中写道:“Apps 在浏览网页时,必须使用 iOS 的 WebKit 框架以及 WebKit JavaScript。”

简单来说,苹果规定,iOS内的所有浏览器,都必须是 safari 内核的,而 safari 又是苹果自己开发的,所以 iOS 系统干预浏览器是个伪命题。好家伙,这很 Apple