VueJS页面仅移动端浏览器报Network Error，桌面端运行正常

首先修复代码中的已知错误 #

当前提供的axios写法存在3个会引发移动端异常的问题：

1. axios的headers配置层级错误，额外套了一层config字段，导致自定义请求头根本没有生效
2. Access-Control-Allow-Origin是响应头，只能由后端返回，前端主动在请求头添加属于非法字段，移动端浏览器对非法请求头的拦截规则比桌面端严格，会直接终止请求
3. 手动拼接JSON字符串容易出现转义错误，比如用户名包含引号、特殊字符时，请求体格式直接错误

修正后的请求代码如下：

const urltocall = BASEURL + "sendotp";
// 直接传对象，axios会自动序列化为合法JSON
const inputData = {
  [Message.PARAM_USERNAME]: this.username
};

axios({
  method: 'post',
  url: urltocall,
  data: inputData,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
})
.then(function (response) {
  console.log(JSON.stringify(response));
})
.catch(function (error) {
  console.error(error); // 建议打印完整错误，不要只alert，方便排查问题
  alert(error);
});

后续排查步骤 #

• 检查BASEURL配置：如果是本地开发测试，桌面端用了localhost/127.0.0.1的话，移动端必须和电脑在同一局域网下，且将BASEURL改为电脑的局域网IP（比如192.168.3.12:1337），否则移动端访问的是自身本地端口，无法连通电脑上的后端服务
• 检查请求协议：如果是线上部署，确认接口是否用了HTTP协议，安卓版Chrome、Firefox现在默认拦截非HTTPS的请求，尤其是跨域请求会直接抛出网络错误，必须升级为HTTPS
• 检查证书有效性：如果接口是HTTPS协议，确认是否用了自签名证书，移动端默认不信任自签名证书，会直接终止请求，桌面端可能你之前手动确认过信任所以可以正常访问
• 检查后端CORS配置：Access-Control-Allow-Origin需要配置在后端服务中，允许前端页面的域名访问，移动端浏览器对CORS预检请求的校验比桌面端更严格，预检失败会直接返回网络错误
• 移动端抓包验证：用Charles、Fiddler等工具给移动端设置代理，捕获请求的完整链路，确认请求是否发出、是否有返回、返回的错误码是什么，可快速定位问题根源

内容的提问来源于stack exchange，提问作者Krishnan V S