在小程式後端中轉獲取介面資料，繞過前端呼叫限制

示。

image

而我們一般都已經在小程式的設定上新增了豆瓣的域名了

image

不過由於豆瓣官方對小程式端的限制，那麼我們就無法進行正常的介面資料獲取了。

2、豆瓣電影資料介面

我們可以從豆瓣的介面文件中瞭解到，豆瓣提供了不少電影相關的資料介面，這個是我們用來練手或者加工小程式的很好資料來源，它的介面如下所示。

豆瓣電影介面的API地址如下所示：https://developers.douban.com/wiki/?title=movie_v2

image

3、前端介面的修改

既然小程式段無法再透過介面方式獲取電影資料，但測試電腦端是沒問題的，那麼我們可以利用自己的API介面對豆瓣介面進行封裝，從而實現介面資料的代理介面處理，為了方便，我們還是儘可能把代理介面弄得通用一些，以便其他介面也可以透過中轉方式獲取，提高中轉介面的通用性。

我們先來看看小程式端的JS端對介面的呼叫程式碼，如下是獲取電影資料的其中一個介面，如下所示。

    //通用的熱映、待映的獲取方式
    fetchFilms: function(page, url, city, start, count) {      return new Promise((resolve, reject) => {        var that = page;        var json = {city: city, start: start, count: count };        var type = "json";//特殊設定，預設是application/json
        if (that.data.hasMore) {
          app.utils.get(url, json, type).then(res => {              if(res.subjects.length === 0){
                that.setData({                  hasMore: false,
                })
              }else{
                that.setData({                  films: that.data.films.concat(res.subjects),                  start: that.data.start + res.subjects.length,                  showLoading: false
                })
              }
              wx.stopPullDownRefresh();

              resolve(res);            
          })
        }
      })
    },

這裡面核心是透過呼叫 app.utils.get(url, json, type) 的方式來處理對API的GET方式呼叫，我們再來看看這個Get方式的呼叫

//釋出的介面module.exports = {
  Promise,makeArray,getUserInfo,
  get:requestGet,post:requestPost,request,decodeHtml,
  setStorage,getStorage,getLocation,getCityName,

  getDate,getTime,formatTime,getDateDiff,getWeek,get2,post2
}

這個 util.js 裡面公佈的get介面就是 requestGet函式，我們用了別名的方式，它的詳細程式碼如下所示

function requestGet(url,data,type){  return request(url,'GET',data,type)
}function requestPost(url,data,type){  return request(url,'POST',data,type)
}//封裝Request請求方法function request(url, method, data = {}, type='application/json'){
  wx.showNavigationBarLoading();  
  return new Promise((resove,reject) => {
    wx.request({      url: url,      data: data,      header: {'Content-Type': type},      method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      success: function(res){
        wx.hideNavigationBarLoading()
        resove(res.data)
      },      fail: function(msg) {        console.log('reqest error',msg)
        wx.hideNavigationBarLoading()
        reject('fail')
      }
    })
  })
}

透過以上的分析，如果我們需要避免修改太多地方，那麼我們把 app.utils.get(url, json, type) 裡面的 get 修改為 get2 的方式就好了，其他引數變化等中轉資訊，封裝在 get2 函式內部就好，這樣我們只需修改一個函式名稱就是了。

中轉介面後，處理的方式有所不同，我們需要把整個帶有引數的地址作為一個完整的URL傳遞給伺服器介面（需要URL編碼，否則無法獲得引數），而且由於通用介面無法返回JSON格式，我們還需要返回的字串內容進行JSON格式的轉換。

//使用內部介面進行中轉var wrapper_get_url = '';function get2(url, data = {}, type='application/json') {    var newdata = {};    var newUrl = wrapper_get_url + "?url=" + encodeURIComponent(url + "?" + json2Form(data));    console.log(newUrl);    return new Promise((resolve, reject) => {
        wx.request({          url: newUrl,          data: newdata,          headers: {'Content-Type': type},          success: function(res) {            //將中轉介面返回的字串轉換為JSON物件
            var res = convertJson(res.data);
            resolve(res)
          },          fail: function(res) {             //將中轉介面返回的字串轉換為JSON物件
             var res = convertJson(res.data);
              reject(res)
          }
        })
    })
}

上面的程式碼我們使用自己的本地介面進行測試，其中需要提交的URL是我們伺服器的URL，原先的URL+資料組合為一個新的引數傳遞給伺服器使用。

另外，由於返回的中轉介面資料為字串資訊，非JSON格式，那麼還需要將中轉介面返回的字串轉換為JSON物件。

//跳脫字元串為JSON物件function convertJson(res) {  //將中轉獲取到的字串轉換為JSON物件
  var jsonStr = JSON.stringify(res);  var jsonStrSym = jsonStr.replace('/', '\');  var jsondata = JSON.parse(JSON.parse(jsonStr));  console.log(jsondata);  return jsondata;
};

以上就是完整的前端程式碼了，透過上面的處理，我們可以正常的獲得介面的資料，並可以正常的展示了，正式釋出的時候，我們修改用上自己的伺服器域名地址即可釋出使用了。

4、後端的代理介面程式碼封裝

前面介紹了小程式的前端程式碼修改，只需要引入一個新的函式就可以實現資料的中轉獲取了，後端我們自然配合這個介面實現資料的獲取即可。

我們在後端增加一個控制器，增加對應的介面定義，如下程式碼所示。

namespace WebAPI.Areas.Third.Controllers
{    /// <summary>
    /// 對第三方的Http介面資料進行包裝，獲取資料，避免小程式並禁止獲取資料的問題
    /// </summary>
    public class HttpWrapperController : BaseApiController
    {        /// <summary>
        /// get方式獲取資料
        /// </summary>
        /// <param name="url">介面URL</param>
        /// <returns></returns>
        [HttpGet]        public string HttpGet(string url)
        {
            HttpHelper helper = new HttpHelper();
            var html = helper.GetHtml(url, "", false);            return html;
        }

是不是比較簡單，這樣就可以實現通用的介面資料中轉了。

最後測試得到的正常資料展示介面，如下所示。

作者：伍華聰_開發框架
連結：