鸿蒙应用开发:"request data error"问题解决

背景介绍

本人初次接触鸿蒙系统, 想着自己在手机上开发个app玩玩, 结果第一步就遇到坑了~~

开发环境

• ide: DevEco Studio 3.0 Release
• harmony SDK: 8
• 语言: ets/ts
• 调试: 本地真机调试

请求源码

因为是个demo, 其实就是从官方demo中copy过来的, 然后换成自己的域名地址

import http from '@ohos.net.http';

// 每一个httpRequest对应一个http请求任务，不可复用
let httpRequest = http.createHttp();
// 用于订阅http响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息
// 从API 8开始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
httpRequest.on('headersReceive', (header) => {
    console.info('header: ' + JSON.stringify(header));
});
httpRequest.request(
    // 填写http请求的url地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
    "http://hancher.top/xxx/xxx",
    {
        method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
        // 开发者根据自身业务需要添加header字段
        header: {
            'Content-Type': 'application/json'
        },
        // 当使用POST请求时此字段用于传递内容
        extraData: {
            "data": "data to send",
        },
        connectTimeout: 60000, // 可选，默认为60s
        readTimeout: 60000, // 可选，默认为60s
    }, (err, data) => {
        if (!err) {
            // data.result为http响应内容，可根据业务需要进行解析
            console.info('http请求结果:' + data.result);
            console.info('code:' + data.responseCode);
            // data.header为http响应头，可根据业务需要进行解析
            console.info('header:' + JSON.stringify(data.header));
            console.info('cookies:' + data.cookies); // 8+
        } else {
            console.info('http请求异常:' + JSON.stringify(err));
            // 当该请求使用完毕时，调用destroy方法主动销毁。
            httpRequest.destroy();
        }
    }
);

大家可以从参考里的官方demo里比对一下, 啥都没变, 然后本地调试, 报

03B00/JSApp:  app Log: http请求异常:{"code":200,"data":"request data error"}

多说一句, 因为是初次使用这个ide, 日志的打印入口都找了半天. 下面是日志的路径

底部导航log-> HiLog -> 选中自己的设备 -> 选择日志级别

问题定位

1. 首先, 请求肯定没有发出去. 因为我没有在我的后台里发现对应的请求
2. 有没有可能是请求参数体的问题呢?
   这个我查了半天官方文档, 以及自己试了字符串, 对应, 数组等各种方式, 都不行. 感觉应该不是这个问题.
3. 是不是权限的问题呢?
   之所以会怀疑到权限的问题上, 因为在查看接口文档的时候发现了这么一句话

   需要权限：ohos.permission.INTERNET

然后就去查权限相关的文档, 在模块的config.json下面把权限加上, 还是不行. 配置如下:

{
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.GET_NETWORK_INFO",
        "reason": "流量网络请求"
      },
      {
        "name": "ohos.permission.INTERNET",
        "reason": "流量网络请求"
      },
      {
        "name": "ohos.permission.SET_NETWORK_INFO",
        "reason": "流量网络请求"
      },
      {
        "name": "ohos.permission.MANAGE_WIFI_CONNECTION",
        "reason": "WLAN网络请求"
      },
      {
        "name": "ohos.permission.SET_WIFI_INFO",
        "reason": "WLAN网络请求"
      },
      {
        "name": "ohos.permission.GET_WIFI_INFO",
        "reason": "WLAN网络请求"
      }
    ]
  }
}

请求结果还是老样子.
4. 最终定位: http明文请求被限制了
这是我在一位老哥的帖子里发现的一个关键节点.
原来正常的http请求会被系统默认禁掉, 而且官方还不给个提示, 太坑了. 官方更推荐使用https的请求方式.

知道了问题所在, 解决问题就好了.config.json添加如下配置即可

"deviceConfig": {
  "default": {
    "network": {
      "cleartextTraffic": true
    }
  }
}

注意, 3里的网络权限也要配置哈, 不然会报没有权限的错误. 不过这个还好, 官方有异常提示了, 就很好定位了.

参考

http请求官方文档
应用配置官方文档
感谢老哥