小程序本地測試：開發者工具能請求後臺數據，手機預覽卻不行

在微信小程序本地開發測試過程當中（這裏指的是本地測試，本地測試，本地測試，重要的事說三遍），會遇到一個坑：在微信開發者工具中能正常請求本地後臺數據，但在手機預覽中卻請求不到，以下圖所示：

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】，加我好友一塊兒探討