HarmonyOS 鸿蒙Next "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.cn/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里的网络权限也要配置哈, 不然会报没有权限的错误. 不过这个还好, 官方有异常提示了, 就很好定位了.

文章地址