小程序本地测试：开发者工具能请求后台数据，手机预览却不行

在微信小程序本地开发测试过程当中（这里指的是本地测试，本地测试，本地测试，重要的事说三遍），会遇到一个坑：在微信开发者工具中能正常请求本地后台数据，但在手机预览中却请求不到，以下图所示：

1.在微信开发者工具中数据正常显示

2.在手机预览中无数据

解决此问题须要有如下4点设置：

一、在微信开发者工具中设置：不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

二、wx.request请求的地址不得使用localhost，而应改为本地服务器所在的电脑IP

假设电脑的IP为192.168.0.110；要请求的地址为：index/list/getdata；代码书写以下：

wx.request({  
  //url: 'http://localhost/index/list/getdata'，错误请求地址  
  url: 'http://192.168.0.110/index/list/getdata',//正确请求地址  
  data: {},  
  header: {    
   'content-type': 'application/json'  
  },  
  success (res) {    
   console.log(res.data)  
  }
})

三、手机和电脑（本地服务器）须要链接同一局域网（WIFI网络）

四、手机扫码进入小程序后，须要打开调试模式才能请求到数据

进入小程序后，此时页面的数据依旧是空的；点击右上角三个点，打开调试

打开调试后会自动关闭当前小程序，须要从新进入，调试模式才生效

从新进入小程序，能够看到页面数据已经出来了，而且右下角有个绿色方形的调试工具按钮

点击右下角的调试工具按钮，能够看到页面的全部数据，方便开发者在手机端更好的测试

总结

1.本地测试时，微信开发者工具务必勾选（不校验合法域名）此设置，不然微信开发者工具请求不到数据；待上线时，再取消此设置。有关为什么要设置（不校验合法域名）的文档地址以下：
https://developers.weixin.qq....

2.在使用wx.request请求地址，若是url是localhost格式的话，虽然在微信开发者工具中是能够请求到后台数据，可是手机预览时，数据没法请求。由于localhost是指本地服务器所在的那台电脑，手机访问localhost并不知道localhost是什么，因此须要使用本机的IP+请求地址

3.疑问：为什么手机开启了调试模式就能够请求到数据，未开启却请求不到？这其实跟前面微信开发者工具设置不校验合法域名的道理是同样的

最后

以为文章不错的，给我点个赞哇，关注一下呗！
技术交流可关注微信公众号【GitWeb】，加我好友一块儿探讨