上一篇
微信小程序请求服务器
小程序通过 wx.request API 发起 HTTP/HTTPS 请求与 服务器交互，支持 GET、POST 等方法，需配置合法域名并遵循安全协议
微信小程序请求服务器全解析
核心配置：合法域名白名单
必须步骤：在微信公众平台（mp.weixin.qq.com）进入小程序管理后台 → “开发”→“开发设置”→“服务器域名”中添加你的业务域名，注意仅支持HTTPS协议，且域名需备案过。
️ 未配置会导致所有网络请求失败并报错request:fail。
API选择指南
| 方法名 | 适用场景 | 特点 |
|---|---|---|
| wx.request | 通用GET/POST请求 | 支持完整参数控制（header/dataType等），推荐优先使用 |
| wx.uploadFile | 文件上传 | 自动处理FormData格式，适合图片、文档等二进制数据传输 |
| wx.downloadFile | 大文件下载 | 直接保存到本地路径，返回临时文件URL |
典型代码结构示例
// 基础GET请求示例 wx.request({ url: 'https://api.example.com/data', // 必须是已备案的合法域名 method: 'GET', data: { page: 1, size: 10 }, // queryString参数自动拼接 header: { // 自定义请求头 'Content-Type': 'application/json', 'Authorization': 'Bearer token' }, success(res) { console.log('数据接收成功:', res.data); }, fail(err) { console.error('请求异常:', err); } }); // 带证书的POST请求（企业级安全传输） wx.request({ url: 'https://pay.example.com/charge', method: 'POST', certificate: true, // 启用SSL双向认证 data: JSON.stringify({orderId: "123"}), success(res) { /.../ } });
关键注意事项清单
| 序号 | 问题点 | 解决方案 |
|---|---|---|
| 1 | 跨域限制 | 确保服务器响应头包含Access-Control-Allow-Origin |
| 2 | HTTPS证书无效 | 使用权威CA机构签发的证书（如Let’s Encrypt免费版） |
| 3 | 超时未处理 | 必填timeout参数（默认60秒），建议设为30秒内 |
| 4 | 大数据量分页加载 | 采用pageNumber+pageSize模式逐页获取 |
| 5 | WebSocket长连接 | 通过wx.connectSocket()建立持久通信通道 |
调试技巧合集
Charles抓包神器：安装PC端代理工具监控小程序与服务器的交互过程；
vConsole日志面板：在小程序中载入debugger;断点调试；
状态码对照表：常见错误码含义速查：
| HTTP状态码 | 说明 | 处理方法 |
|————|————————–|—————————-|
| 401 | Unauthorized | 检查Token是否过期 |
| 403 | Forbidden | 权限不足需调整接口策略 |
| 500 | Server Error | 查看服务端Nginx日志定位问题 |
相关问题与解答
Q1：为什么明明配置了合法域名还是报“不在以下request合法域名列表中”？
检查三点：①是否区分大小写（域名大小写敏感）；②是否清除了浏览器缓存；③正式环境与测试环境的域名是否分开配置,建议删除所有缓存后重试。
Q2：如何实现小程序与后端服务的WebSocket实时通信？
分三步走：①用wx.connectSocket()创建连接；②监听onOpen/onMessage/onClose事件；③发送数据时调用send()方法,示例：
const socketTask = wx.connectSocket({ url: 'wss://echo.websocket.org', // WebSocket URL必须以wss://开头 protocols: ['h2'], // 可选子协议版本 success() { console.log("已建立WebSocket连接"); } }); socketTask.onMessage((msg) => { /处理接收的消息/ });
