如何使用云函数绕过微信小程序网络通信的域名限制

引言

在微信小程序开发过程中我们会遇到小程序只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。域名需要满足 HTTPS 和备案条件。如果是自家域名，你可以按照要求去做。但如果你要访问第三方 API，而它恰好不满足上述条件时该怎么办？

使用云函数中转

一个比较简单的方法是使用云函数中转。将有限制的小程序请求转为没有限制的云函数请求，达到间接访问未备案、无 HTTPS API 的效果。

云函数（Serverless Cloud Function，SCF）是腾讯云为企业和开发者们提供的无服务器执行环境，帮助您在无需购买和管理服务器的情况下运行代码。您只需使用平台支持的语言编写核心代码并设置代码运行的条件，即可在腾讯云基础设施上弹性、安全地运行代码。SCF 是实时文件处理和数据处理等场景下理想的计算平台。

本例使用的 API

假设我们要访问的 API 是Studio Ghibli API，会返回一些 Ghibli 电影或人物资料。

我们向该 API 地址https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe发送一个 get 请求，将获取到如下结果：

{
  "id": "2baf70d1-42bb-4437-b551-e5fed5a87abe",
  "title": "Castle in the Sky",
  "description": "The orphan Sheeta inherited a mysterious crystal that links her to the mythical sky-kingdom of Laputa. With the help of resourceful Pazu and a rollicking band of sky pirates, she makes her way to the ruins of the once-great civilization. Sheeta and Pazu must outwit the evil Muska, who plans to use Laputa's science to make himself ruler of the world.",
  "director": "Hayao Miyazaki",
  "producer": "Isao Takahata",
  "release_date": 1986,
  "rt_score": 95
}

创建云函数

首先在小程序开发者工具中点击上方的云开发按钮，开通云开发功能。第一次打开会先让你新建一个环境，选择配额方案。对于个人开发者而言免费的基础版 1 应该够用了。

2020-11-21_开通云开发.png

2020-11-21_配额方案.png

回到微信开发者工具，在云函数根目录右键新建 Node.js 云函数。

2020-11-21_新建NodeJS云函数.png

新建好的云函数目录结构如下所示，我们在该目录打开终端，执行npm i安装wx-server-sdk，这是云函数开发必须安装的依赖。

2020-11-21_新建好的云函数目录.png

接着执行npm i -S got。

got是 Node.js 中一个轻量级且功能强大的 HTTP 请求库。

编写云函数代码

// index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')
const got = require('got')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const response = await got(
    'https://ghibliapi.herokuapp.com/films/2baf70d1-42bb-4437-b551-e5fed5a87abe',
    { responseType: 'json' }
  )
  return response.body
}

编写完成后在该云函数目录右键开启云函数本地调试。

这段代码中我们通过got发送一个 get 请求到上述的 API 地址中，再将获取到的 Response 中的 body 返回给小程序客户端。

小程序调用云函数

在小程序中我们使用如下代码来调用云函数：

wx.cloud
  .callFunction({ name: 'getGhibliFilm' })
  .then((res) => {
    console.log(res)
  })
  .catch(console.error)

运行小程序，如果你在控制台看到下方的返回，说明你的云函数调用成功了。稍后你可以关闭云函数本地调试，上传并部署该云函数。

2020-11-21_云函数返回结果.png

总结

垃圾微信，生态搞得这么封闭又臃肿，不想再搞微信小程序了。

Reference

小程序如何访问未备案的 API ｜ 云开发