微信小程序源码分享常见技术问题：如何解决跨域请求？

Question

在微信小程序开发中，常因请求第三方接口出现跨域问题。由于小程序运行在微信客户端，其网络请求不受浏览器同源策略限制，但服务端仍可能对来源进行校验。常见表现为开发者工具报“statusCode 403”或“CORS error”，实则问题多出在服务器未正确配置允许小程序的请求头。解决方法包括：后端添加响应头`Access-Control-Allow-Origin: *`、确保不携带非法字段、使用合法域名并配置业务域名白名单。此外，建议通过云函数代理请求敏感接口，规避前端跨域风险。

Answer 1

微信小程序请求第三方接口跨域问题深度解析与解决方案

1. 跨域问题的本质：从小程序网络机制谈起

微信小程序运行在微信客户端环境中，其网络请求由原生层发起，并非浏览器环境，因此不受传统浏览器同源策略（Same-Origin Policy）的直接约束。然而，当小程序通过 wx.request 发起 HTTPS 请求时，目标服务器仍可能基于 HTTP 请求头中的来源信息进行访问控制。

尽管“CORS”是浏览器特有的跨域机制，但开发者工具常模拟浏览器行为，导致错误提示如“CORS error”或“statusCode 403”，这实则反映的是服务端未正确响应预检请求（Preflight Request）或拒绝了特定来源的请求。

2. 常见现象与错误表现

• 开发者工具中出现 CORS header ‘Access-Control-Allow-Origin’ missing
• 真实设备上报错 request:fail url not in domain list
• HTTP 状态码返回 403 Forbidden 或 405 Method Not Allowed
• OPTIONS 预检请求被拦截，无响应返回
• 自定义请求头字段触发预检失败

3. 根本原因分析流程图

        graph TD
            A[小程序发起wx.request] --> B{是否为合法域名?}
            B -- 否 --> C[微信客户端直接拦截]
            B -- 是 --> D[发送HTTP请求至目标服务器]
            D --> E{服务器是否支持CORS?}
            E -- 否 --> F[返回403/无响应]
            E -- 是 --> G[检查Access-Control-Allow-Origin等头]
            G --> H{是否包含小程序来源?}
            H -- 否 --> I[预检失败或响应被拒绝]
            H -- 是 --> J[请求成功]
    

4. 解决方案层级递进表

层级	方案名称	适用场景	实施难度	安全性
1	配置 Access-Control-Allow-Origin: *	测试环境调试	低	低
2	精确设置 Allow-Origin 白名单	生产环境安全控制	中	高
3	小程序管理后台配置业务域名	所有线上请求	低	高
4	避免携带非法自定义Header	规避预检失败	低	中
5	使用云函数代理敏感接口	调用非CORS兼容第三方API	中高	极高
6	后端启用 OPTIONS 方法响应	支持复杂请求预检	中	高
7	统一网关层处理跨域	微服务架构下集中管理	高	高

5. 关键技术实现代码示例

以下是 Node.js Express 框架中添加 CORS 支持的中间件实现：

const cors = (req, res, next) => {
  const allowedOrigin = [
    'https://servicewechat.com',
    'https://yourdomain.com'
  ];
  
  const origin = req.headers.origin;
  if (allowedOrigin.includes(origin)) {
    res.header('Access-Control-Allow-Origin', origin);
  }

  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-WX-OpenID');
  res.header('Access-Control-Allow-Credentials', 'true');

  if (req.method === 'OPTIONS') {
    res.sendStatus(200);
    return;
  }

  next();
};

app.use(cors);
    

6. 小程序端最佳实践建议

1. 确保所有请求域名已在微信公众平台“开发管理 - 开发设置”中配置为“request 合法域名”
2. 避免在请求头中添加如 X-Requested-With 等可能触发预检的非标准字段
3. 使用 content-type: application/json 而非 form-data 以减少预检概率
4. 对于非企业备案域名，无法配置为业务域名时，必须通过云函数中转
5. 在云开发环境下，优先使用云函数作为代理层调用外部 API
6. 对敏感接口（如支付、用户数据），禁止前端直连，强制走后端代理
7. 利用 env: production 区分不同环境的代理策略
8. 定期审查第三方接口变更，防止因对方升级安全策略导致中断

7. 云函数代理请求完整示例

使用腾讯云开发 Cloud Functions 实现对外部 API 的安全代理：

// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV });

const axios = require('axios');

exports.main = async (event, context) => {
  const { method = 'GET', url, data, headers = {} } = event;

  try {
    const response = await axios({
      method,
      url,
      data,
      headers: {
        ...headers,
        'User-Agent': 'WeChat-Client',
        // 不传递前端可能伪造的敏感头
      },
      timeout: 5000
    });

    return {
      success: true,
      data: response.data,
      status: response.status
    };
  } catch (err) {
    return {
      success: false,
      errMsg: err.message,
      status: err.response?.status || 500
    };
  }
};