uniapp网络调试问题汇总

2020-03-27 本文已影响0人瑟闻风倾

1. 真机调试有时无法显示打印信息，但是h5端可以（原因未知）

2. h5端调试时，跨域问题参考uni-app之浏览器跨域问题解决方案来解决，主要是服务器端进行设置从而允许跨域请求。

跨域.png

3. h5端调试时，若页面出现`your connention is not peivate`问题,点击页面的`Advanced`暂时解决（实际是中病毒了，可安装火绒安全软件进行杀毒）。

h5页面.png

4. uniapp之app端解析不到业务数据

4.1 第一次出现该问题

服务器端封装的业务数据data为

"data": {
    "code": "0",
    "msg": "success",
    "res": {
      "token": "WM8JngVEeUi6sQmK",
      "receive": {
        "username": "**",
        "password": "**",
        "timestamp": "1562641227000"
      }
    }
  },

h5端获取的业务数据data为

{
  "code": "0",
  "msg": "success",
  "res": {
    "token": "GY23kxVhKmkwxXRy",
    "receive": {
      "username": "**",
      "password": "**",
      "timestamp": "1562641227000"
    }
  }
}

响应头.png

app端获取的数据为 (业务数据 data 一直为 200 OK)

{
  "data": "200 OK",
  "statusCode": 200,
  "header": {
    "X-Android-Sent-Millis ": "1562634044102",
    "Content-Type ": "application/json;charset=utf-8;",
    "Date ": "Tue, 09 Jul 2019 01:00:44 GMT",
    "Server ": "nginx/1.14.0",
    "X-Android-Response-Source ": "NETWORK 200",
    "X-Android-Received-Millis ": "1562634044133",
    "Access-Control-Allow-Origin ": "*",
    "Cache-Control ": "no-store, no-cache, must-revalidate",
    "Pragma ": "no-cache",
    "Expires ": "Thu, 19 Nov 1981 08:52:00 GMT",
    "X-Powered-By ": "PHP/7.1.16",
    "Transfer-Encoding ": "chunked",
    "Connection ": "keep-alive"
  },
  "errMsg": "request:ok"
}

分析：app端无法解析业务数据data；但是响应头与h5端相比多了3个android相关的参数，即X-Android-Sent-Millis 、X-Android-Response-Source和X-Android-Received-Millis。
解决：修改该uni-app项目的配置文件mainfest.json，选择App常用其他设置，自定义组件模式默认是开启的，关闭自定义组件模式并重启开发工具即解决app端无法解析业务数据的问题，此时app端获取到的响应头的参数与h5端是一样的。

image.png
备注：uni-app新老编译模式差异说明
app端成功获取并解析业务数据：

{
  "data": {
    "code": "0",
    "msg": "success",
    "res": {
      "token": "N6iXKWHEc_DmFJ2k",
      "receive": {
        "username": "**",
        "password": "**",
        "timestamp": "1562641227000"
      }
    }
  },
  "statusCode": 200,
  "header": {
    "Pragma": "no-cache",
    "Date": "Tue, 09 Jul 2019 04:50:42 GMT",
    "Server": "nginx/1.14.0",
    "X-Powered-By": "PHP/7.1.16",
    "Transfer-Encoding": "chunked",
    "Content-Type": "application/json;charset=utf-8;",
    "Access-Control-Allow-Origin": "*",
    "Cache-Control": "no-store, no-cache, must-revalidate",
    "Connection": "keep-alive",
    "Expires": "Thu, 19 Nov 1981 08:52:00 GMT"
  },
  "errMsg": "request:ok"
}

说明：通过关闭自定义组件模式并重启开发工具来解决app端无法解析业务数据的问题，原理并不清楚，只是我偶然这样操作突然发现app端竟然能获取到业务数据了；但是其他人遇到这个问题时按这种方式并没有解决。
所以关不关闭自定义组件模式与app端是否能解析业务数据之间好像没有必然联系，这个解决方式暂时存疑吧，毕竟也可能是我当时别的操作解决了问题(毕竟当时我尝试了各种方式，可能记混了)，或者服务器端修改了某些网络配置就解决了该问题（前提：该问题是服务器端的配置问题，app端怎么乱倒腾都是徒劳）。
事实证明正是服务器端的配置问题导致app端无法解析业务数据，具体请看下面的第二次出现该问题的分析和解决。

4.2 第二次出现该问题

问题回顾与分析：分别访问两台服务器的接口，服务器A返回的业务数据数据app端和h5端都能正常接收并完整解析；但是服务器B返回的业务数据，app端和h5端都能接收到，但是app端不能正常解析业务数据（data一直为200 OK），所以问题可能出在服务器B的网络配置上。

(1) 请求服务器A中的接口a（app端和h5端都能请求到业务数据）

test1:function(){
            uni.request({
              url: "http://192.168.71.237:7088/MVNFHM_war/pmsAppMy/UserLogin.do",
              method: "POST",
              header: {
                "content-type": "application/x-www-form-urlencoded"
              },
              data: {
                  company_id:"20190221002",
                  userId:"001",
                  passWord:""
              },
              success(res) {
                console.log("test1-login:" + JSON.stringify(res));
              },
              fail(res) {},
              complete() {}
            });
},

h5端正常获取并解析业务数据data

{
  "data": {
    "company_id": "20190221002",
    "department_id": "e4885de96b7b4f83a198e3024cbc19ac",
    "user_name": "A01",
    "department_name": "A-01",
    "departmentId": "e4885de96b7b4f83a198e3024cbc19ac",
    "position_name": "质检",
    "userName": "A01",
    "userId": "f4ea0fa3e40540d1b9a2b0d54e51a505",
    "result": "10",
    "operate": "质检",
    "user_id": "f4ea0fa3e40540d1b9a2b0d54e51a505",
    "company_name": "椒江新厂",
    "position_id": ""
  },
  "statusCode": 200,
  "header": {
    "content-length": "383",
    "content-type": "application/json;charset=UTF-8"
  },
  "errMsg": "request:ok"
}

content-type.png

app端正常获取并解析业务数据data

{
  "data": {
    "company_id": "20190221002",
    "department_id": "e4885de96b7b4f83a198e3024cbc19ac",
    "user_name": "A01",
    "department_name": "A-01",
    "departmentId": "e4885de96b7b4f83a198e3024cbc19ac",
    "position_name": "质检",
    "userName": "A01",
    "userId": "f4ea0fa3e40540d1b9a2b0d54e51a505",
    "result": "10",
    "operate": "质检",
    "user_id": "f4ea0fa3e40540d1b9a2b0d54e51a505",
    "company_name": "椒江新厂",
    "position_id": ""
  },
  "statusCode": 200,
  "header": {
    "X-Android-Sent-Millis ": "1566436305183",
    "Content-Type ": "application/json;charset=UTF-8",
    "Date ": "Thu, 22 Aug 2019 01:10:23 GMT",
    "Server ": "Apache-Coyote/1.1",
    "Content-Length ": "383",
    "X-Android-Response-Source ": "NETWORK 200",
    "X-Android-Received-Millis ": "1566436305837",
    "Access-Control-Allow-Origin ": "*"
  },
  "errMsg": "request:ok"
}

(2) 请求服务器B中的接口b

问题描述：app端和h5端返回数据不一致，app端不能正常解析业务数据（data一直为200 OK），但h5端可以完整获取并解析到业务数据。

test2:function(){
            uni.request({
              url: "http://edge.uchat.com.cn:8082/user/login",
              method: "POST",
              header: {
                "content-type": "application/x-www-form-urlencoded"
              },
              data: {
                  mobile : "15639150623",
                  password : "ly250"
              },
              success(res) {
                console.log("test2-login:" + JSON.stringify(res));
              },
              fail(res) {},
              complete() {}
            });
},

h5端正常获取并解析业务数据

{
  "data": {
    "code": "0",
    "msg": "success",
    "data": {
      "token": "WnbR5-xzSfLiNpNj",
      "userInfo": {
        "user_id": "10",
        "center_id": "1",
        "dept_id": "1",
        "name": "李艳",
        "mobile": "15639150623",
        "password": "8f8fc1b88358d0db495f1a87dc41e13d",
        "is_admin": "0",
        "status": "1",
        "add_time": "1565230771",
        "last_login_time": "1566380685",
        "last_login_ip": "112.16.93.24"
      }
    }
  },
  "statusCode": 200,
  "header": {
    "pragma": "no-cache",
    "content-type": "application/json; charset=Array;",
    "cache-control": "no-store, no-cache, must-revalidate",
    "expires": "Thu, 19 Nov 1981 08:52:00 GMT"
  },
  "errMsg": "request:ok"
}

content-type.png

app端无法解析业务数据(业务数据data一直为200 OK)

{
  "data": "200 OK",
  "statusCode": 200,
  "header": {
    "Cache-Control ": "no-store, no-cache, must-revalidate",
    "Pragma ": "no-cache",
    "Expires ": "Thu, 19 Nov 1981 08:52:00 GMT",
    "X-Powered-By ": "PHP/7.1.16",
    "X-Android-Response-Source ": "NETWORK 200",
    "Connection ": "keep-alive",
    "Access-Control-Allow-Headers ": "x-requested-with, content-type",
    "X-Android-Sent-Millis ": "1566434712638",
    "Content-Type ": "application/json; charset=Array;",
    "Date ": "Thu, 22 Aug 2019 00:45:13 GMT",
    "Server ": "nginx/1.14.0",
    "Transfer-Encoding ": "chunked",
    "X-Android-Received-Millis ": "1566434712659",
    "Access-Control-Allow-Origin ": "*"
  },
  "errMsg": "request:ok"
}

问题：app端请求的业务数据data一直为“200 OK”，但h5端可以请求到业务数据。
分析：应该是响应头的问题。

猜想1：前端发送数据的 "编码方式" 与后台接收数据的 "解码方式" 不同。这里说的编码与解码对应的是请求头 header 中的 Content-Type 字段。设置字符集为UTF-8（问题解决）：
格式错误.png
格式正确.png

总结：h5端正常解析，但是app端数据解析异常，可能原因是不同语言对header解析不一样（有些语言是弱语言，兼容性没有那个大）。

uniapp网络调试问题汇总

1. 真机调试有时无法显示打印信息，但是h5端可以（原因未知）

2. h5端调试时，跨域问题参考uni-app之浏览器跨域问题解决方案来解决，主要是服务器端进行设置从而允许跨域请求。

3. h5端调试时，若页面出现`your connention is not peivate`问题,点击页面的`Advanced`暂时解决（实际是中病毒了，可安装火绒安全软件进行杀毒）。

4. uniapp之app端解析不到业务数据

4.1 第一次出现该问题

4.2 第二次出现该问题

猜你喜欢

热点阅读

uniapp网络调试问题汇总

1. 真机调试有时无法显示打印信息，但是h5端可以（原因未知）

2. h5端调试时，跨域问题参考uni-app之浏览器跨域问题解决方案来解决，主要是服务器端进行设置从而允许跨域请求。

3. h5端调试时，若页面出现your connention is not peivate问题,点击页面的Advanced暂时解决（实际是中病毒了，可安装火绒安全软件进行杀毒）。

4. uniapp之app端解析不到业务数据

4.1 第一次出现该问题

4.2 第二次出现该问题

猜你喜欢

热点阅读

3. h5端调试时，若页面出现`your connention is not peivate`问题,点击页面的`Advanced`暂时解决（实际是中病毒了，可安装火绒安全软件进行杀毒）。