前言

今天呢，我们一起看一下小程序中的关于请求数据方面的知识，一起思考一个问题，在小程序端存不存在跨域的问题呢？

---

一、网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

• 只能请求 HTTPS 类型的接口
• 必须将接口的域名添加到信任列表中

二、配置 request

1. 修改request域名需要注意哪些？

需求描述：假设在自己的微信小程序中，希望请求 https://www.escook.cn/ 域名下的接口

配置步骤：登录微信小程序管理后台 --> 开发 --> 开发设置 --> 服务器域名 --> 修改 request 合法域名

修改时需要注意以下事项：

• 域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议
• 域名不能使用 IP 地址或 localhost
• 域名必须经过 ICP 备案
• 服务器域名一个月内可申请5次修改

2. 发起GET请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求

代码示例(如下)：

wx.request({
  url: 'https://www.xxx.com', // 请求的接口地址，必须基于https协议
  methods: 'GET', // 请求的方式
  data: {
    // 发送到后台的数据
	name: 'zs',
	age: 22
  },
  success: res => {
	// 请求成功后的回调函数
	console.log(res)
  }
})

3. 发起 POST 请求

调用微信小程序提供的 wx.request() 方法，可以发起 POST 数据请求

代码示例(如下)：

wx.request({
  url: 'https://www.xxx.com', // 请求的接口地址，必须基于https协议
  methods: 'POST', // 请求的方式
  data: {
  	// 发送到后台的数据
	name: 'ls',
	gender: '男'
  },
  success: res => {
	// 请求成功后的回调函数
	console.log(res)
  }
})

4. 在页面刚加载的时候请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数

代码示例(如下)：

/**
* 生命周期函数——监听页面加载
*/
onLoad: function(options) {
  this.getSwiperList()
  this.getGridList()
},

// 获取轮播图数据
getSwiperList() {...
},

// 获取九宫格的数据
getGridList() {...
}

5. 跳过 request 合法域名校验

如果后端程序员 仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口，此时为了不耽误开发的进度，我们需要在微信开发者工具中，临时开启 [开发环境不校验请求域名、TLS 版本及 HTTPS 证书」 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。

注意：在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确。

三、关于跨域和 AJAX 的说明

1. 跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域问题

2. AJAX 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于 小程序宿主环境是微信客户端，所以小程序中不能叫做 发起 AJAX 请求，而是叫做 发起网络数据请求

---

总结

You never know your luck.