小程序入门之跳过域名校验、跨域与Ajax问题解析_Ajax

前言

在小程序开发过程中，我们常常会遇到一些和网络请求相关的问题，比如合法域名校验、跨域以及 ajax 的使用。今天这篇博客就来为大家详细讲解一下这些内容，帮助大家少走弯路，更高效地进行小程序开发。

一、跳过 request 合法域名校验

在小程序中发起网络数据请求，有两个硬性条件：接口必须基于 https 协议，同时要把接口对应的域名配置到合法域名列表里。可要是后端程序员只提供了 http 协议的接口，这时候该怎么办呢？别着急，为了不耽误开发进度，我们可以在微信开发者工具中临时开启一个配置项，跳过 request 合法域名校验。

具体操作步骤如下：

在微信开发者工具右上角找到 “详情” 按钮并点击，会弹出一个侧边栏。
在侧边栏中选择 “本地设置”。
勾选 “不校验合法域名、web-view tls 版本以及 https 证书” 选项。

这样设置之后，即使使用的是 http 接口，或者没有把域名添加到域名列表里，也能正常发起请求啦。不过要注意，这个选项只能在开发与调试阶段使用。项目部署和上线的时候，还是得乖乖使用 https 协议的接口，并把对应的域名配置到合法域名列表中。下面给大家看一个简单的示例代码：

// 假设后端提供了一个http接口
wx.request({
  url: 'http://example.com/api/data', // 替换为实际接口地址
  method: 'get',
  success(res) {
    console.log(res.data);
  },
  fail(err) {
    console.error('请求失败', err);
  }
});

在开发阶段，勾选上述配置项后，这段代码就能正常请求数据了。但上线前，一定要记得切换回 https 接口，并配置好合法域名。

二、小程序中的跨域与 ajax 问题

跨域问题：跨域问题只存在于基于浏览器的 web 开发中。因为小程序的宿主环境是微信客户端，而不是浏览器，所以在小程序开发里，根本不存在跨域这个问题。大家在开发小程序，涉及接口请求的时候，不用考虑跨域的事儿，直接发请求就行。这可比在浏览器端开发方便多啦！
ajax 问题：ajax 技术的核心依赖于浏览器里的xmlhttprequest（简称xhr）对象。同样因为小程序的宿主环境不是浏览器，所以小程序里不存在 ajax 请求，小程序里的数据请求也不能叫做 ajax 请求，正确的叫法是 “发起网络数据请求” 。例如，我们在小程序中使用wx.request来发起请求：

wx.request({
  url: 'https://example.com/api/data', // 假设已配置好合法域名
  method: 'post',
  data: {
    key: 'value'
  },
  success(res) {
    console.log('请求成功', res.data);
  },
  fail(err) {
    console.error('请求失败', err);
  }
});

这就是小程序中发起网络数据请求的常见方式，和传统浏览器端的 ajax 请求有本质区别，大家千万不要混淆了。