解决安卓手机浏览器无法上传文件的问题 xhr.status = 0

第二篇博客

解决安卓(手机)浏览器无法上传文件的问题 xhr.status = 0

Created by @一个前端er 2020/02/27
前端菜鸟一枚,欢迎各位大佬对本博文批评指正

昨天写了一个浏览器上传下载文件的一个demo,原生html5 + 原生js,没有依赖jquery,毕竟就一个网页,就用原生的XmlHttpRequest进行请求,都2020年了,就不想着兼容低版本的毒瘤IE浏览器了。后端用的是阿里开发的nodejs框架eggjs。eggjs虽然做不到开箱即用,但是文档现在还是挺全的,遇到的一些问题百度上也基本上都能搜到。

今天把前后端放到服务器上进行调试,用pc的chrome和edge浏览器都测试通过,就拿起了自己的手机进行调试,发现选择文件之后点击上传按钮后提示正在上传之后就没反应了,网速也是0.x kb/s。其实昨天在敲代码的时候我就发现了这个问题,不过当时不以为意,以为是局域网内不能访问,以为是个bug,没想到今天放到服务器上了还是不能访问,印象中昨天用手机浏览器调试的时候后端的控制台是没有日志打印出来的,那就意味着根本就没有访问后端的接口。

在这里就要推荐一下我一直在用的via浏览器啦——轻量级的手机浏览器,而且还能安装一些插件,界面也很简约。via浏览器截图
一开始我以为是via浏览器用的安卓原生的webview,不支持文件上传,然后又用了安卓的chrome浏览器和系统自带的浏览器,发现还是不行。就知道这可能不是简单的浏览器内核的问题了。然后我就打印出来xhr.status发现在手机上一直是0 console.log(xhr.readyState, xhr.status)
readyState = 4 ,status = 0.

百度了好一会儿,终于有一篇文章给了我启发:
javascript中发起ajax请求返回status==0

因为我的前后端是部署在同一台服务器上的,所以我之前前端的请求地址用的是localhost

     xhr.open('POST', 'http://localhost:3000/api', true)

localhost是本机地址!换成具体的ip地址就可以访问了,pc浏览器也不能访问远程服务器!之前测试可以访问是因为我在自己的电脑上启动了eggjs服务,前端访问远程的服务器之后,请求到的html是在本机上运行的,localhost和127.0.0.1指向的都是本机,如果你用的是手机访问,指向的就是手机本机(虽然手机并没有localhost),这也就说得通了,我在电脑上能上传文件并提示上传成功,是因为电脑本机开了后端服务!

记一次哭笑不得的开发经历。
在这里插入图片描述

我是一枚菜鸟 @一个前端er ,下篇博客见 。

猜你喜欢

转载自blog.csdn.net/qq_41777791/article/details/104544519
今日推荐