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

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

一、问题引入

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

<button bindtap='testSendRequest'>网络测试</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 证书

如下图：

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

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

2. 针对线上的话，需要在微信小程序后台对域名进行配置