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

时间:2024-03-25 09:13:12

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

一、问题引入

在小程序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的回调,而是走到failcomplete回调。

二、问题原因

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

三、解决方案

微信web开发者工具设置->项目设置->项目设置
勾选:不校验安全域名、TLS 版本以及 HTTPS 证书

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

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

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