小程序request请求返回401错误解决指南

本文针对小程序开发中常见的 request 请求返回 401 状态码问题进行详细分析，并提供从排查到修复的完整解决方案。

一、问题/场景描述

在小程序开发过程中，前端通过 wx.request 发起网络请求，后端返回 HTTP 状态码 401。401 状态码通常表示“未授权”，即客户端未提供有效身份认证信息，或认证信息已过期。常见场景包括：用户登录态失效、Token 未携带或错误、请求权限不足等。开发者可能遇到白屏、功能无法使用等问题，严重影响用户体验。

二、原因分析

小程序 request 请求返回 401 的常见原因如下：

• Token 未携带：请求头中缺少 Authorization 字段或自定义 token 字段。
• Token 已过期：用户登录后 token 有时效性，过期后需重新获取。
• Token 格式错误：例如缺少 Bearer 前缀、token 值拼写错误。
• 后端鉴权接口配置错误：如路由未设置免鉴权，或鉴权中间件逻辑错误。
• 跨域问题（较少见）：部分后端框架在跨域请求时会先发送 OPTIONS 预检请求，若预检请求返回 401，则实际请求也会失败。

三、详细解决步骤

步骤1：检查请求头中是否携带 Token

打开小程序开发者工具，在 Network 面板查看具体请求的请求头。确认是否包含 Authorization 字段。例如，若使用 JWT 认证，请求头应类似：

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

如果没有，需在小程序代码中手动添加。示例代码（假设 token 存储在本地缓存）：

wx.request({
  url: 'https://api.example.com/resource',
  header: {
    'Authorization': 'Bearer ' + wx.getStorageSync('token')
  },
  success: function(res) {
    console.log(res)
  }
})

步骤2：验证 Token 是否过期

在控制台打印或通过接口测试工具（如 Postman）检查 token 的有效性。如果过期，需要重新登录或刷新 token。小程序端可统一处理 401 响应，自动跳转到登录页：

wx.request({
  url: 'https://api.example.com/resource',
  header: {
    'Authorization': 'Bearer ' + wx.getStorageSync('token')
  },
  success: function(res) {
    if (res.statusCode === 401) {
      wx.removeStorageSync('token');
      wx.navigateTo({ url: '/pages/login/login' });
    }
  }
})

步骤3：检查后端鉴权逻辑

假设后端使用 Node.js + Express 和 jsonwebtoken 库，确认中间件是否正确校验 token。示例后端代码：

const jwt = require('jsonwebtoken');
const authMiddleware = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  if (!authHeader) return res.status(401).json({ error: 'No token provided' });
  const token = authHeader.split(' ')[1];
  try {
    const decoded = jwt.verify(token, 'your-secret-key');
    req.user = decoded;
    next();
  } catch (err) {
    return res.status(401).json({ error: 'Invalid token' });
  }
};

确保所有需要鉴权的路由都应用此中间件。

步骤4：排查跨域预检请求

如果后端启用了 CORS 并且前端请求包含自定义头（如 Authorization），浏览器会先发送 OPTIONS 请求。确保后端正确处理 OPTIONS 请求，返回 200 状态码：

app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Authorization, Content-Type');
  res.sendStatus(200);
});

四、注意事项

• 不要将 token 明文存储在前端本地存储中，考虑使用 wx.setStorageSync 加密存储。
• 统一封装 wx.request 方法，避免每个请求单独处理 token。
• 后端应使用 HTTPS 协议，防止 token 在传输中被劫持。
• 定期刷新 token，避免长期有效导致安全风险。

五、适用环境

本文适用于微信小程序 / 支付宝小程序 / 百度小程序等主流小程序平台，后端环境包括 Node.js、Java Spring Boot、Python Flask、PHP Laravel 等常见框架。