微信小程序网络请求配置问题及本地网络请求测试解决方案

我不是女神ヾ 2022-03-28 06:52 1140阅读 0赞

> 本文只针对服务器网站没有备案或只需要做本地网络接口请求

一、问题引入

在小程序`demo.wxml`中声明`button`控件，并设置点击事件，如下：

在`demo.js`中，对上述`button`点击事件进行处理，发送本地网络请求，如下：

testSendRequest:function(){
        wx.request({
          url: "http://localhost:8083/test/index",
          success: function (response) {
              console.log("success");
          },
          fail:function(){
            console.log("fail");
          },
          complete: function () {
            console.log("complete");
          }
        })
      }

接下来，运行小程序，打开`调试器`，点击`button`按钮，发现报错如下：

VM199:1  http://localhost:8083 不在以下 request 合法域名列表中，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
    
    
    VM199:1 request:fail url not in domain list
    register.js? [sm]:53 fail
    register.js? [sm]:56 complete

根据提示，该网络请求并没有走到`success`的回调，而是走到`fail`和`complete`回调。

二、问题原因

1.  微信小程序要求必须配置域名，且服务器域名需经过ICP备案。新备案域名需24小时后才可配置。域名格式只支持英文大小写字母、数字及“- ”，不支持IP地址。
2.  如果本地测试，可以取消`安全域名及HTTPS证书校验`

三、解决方案

1.  在`微信web开发者工具`的`设置`\->`项目设置`\->`项目设置`中  
    勾选：`不校验安全域名、TLS 版本以及 HTTPS 证书`

如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70]

此时，再次调用本地网络请求，可以请求成功。

VM228:1 工具未校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书。
    register.js? [sm]:50 success
    register.js? [sm]:56 complete

1.  针对线上的话，需要在微信小程序后台对域名进行配置  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70]: /images/20220328/d7bfdbd80f0c40079e11cc8d2676eb42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 1]: /images/20220328/b21d8a0c42f146518c52d46024bf24b9.png