在使用 uni-app 开发的微信小程序访问阿里云服务器上的接口时,通常需要通过 HTTPS 域名 进行通信。为了实现安全访问,一般会在 Nginx 上配置 SSL 证书,并将请求转发到本地(或后端)服务。
在这里插入图片描述

以下是一个完整的配置方案和示例:


✅ 一、整体架构说明

uni-app 微信小程序
        |
   HTTPS 请求(域名)
        |
     阿里云 Nginx 服务器(带 SSL 证书)
        |
   转发至本地/内网服务(如 Node.js / Java / PHP)

✅ 二、准备工作

1. 域名备案与绑定

  • 域名已备案(中国大陆地区要求)
  • 小程序后台配置 request 合法域名(需 HTTPS)

2. SSL 证书申请

  • 在阿里云申请免费或付费的 SSL 证书(推荐使用 DV 类型)
  • 下载证书文件(包含 .crt.key 文件)

3. 本地服务部署

  • 确保本地服务(如 localhost:3000 或局域网 IP)可以被 Nginx 访问
  • 推荐使用反向代理方式暴露服务(如 PM2 + Express)

✅ 三、Nginx 配置文件详解(含 SSL + 反向代理)

假设:

  • 域名为:api.example.com
  • 本地服务地址为:http://192.168.1.100:3000
  • SSL 证书路径为:/etc/nginx/certs/api.example.com.crt.key
server {
    listen 443 ssl;
    server_name api.example.com;

    # SSL 配置
    ssl_certificate /etc/nginx/certs/api.example.com.crt;
    ssl_certificate_key /etc/nginx/certs/api.example.com.key;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!MD5;

    # 日志格式
    access_log /var/log/nginx/api-access.log;
    error_log /var/log/nginx/api-error.log;

    # 跨域支持(可选)
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
    add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

    # 处理预检请求
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
    }

    # 反向代理配置
    location / {
        proxy_pass http://192.168.1.100:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_connect_timeout 60s;
        proxy_read_timeout 120s;
    }
}

✅ 四、HTTP 自动跳转 HTTPS(可选)

如果你希望用户自动从 HTTP 跳转到 HTTPS:

server {
    listen 80;
    server_name api.example.com;

    return 301 https://$host$request_uri;
}

✅ 五、uni-app 请求配置示例

在 uni-app 中发起网络请求(如使用 uni.request):

uni.request({
  url: 'https://api.example.com/user/login',
  method: 'POST',
  data: {
    username: 'test',
    password: '123456'
  },
  success(res) {
    console.log('登录结果:', res.data);
  },
  fail(err) {
    console.error('请求失败:', err);
  }
});

⚠️ 注意:确保该域名已在微信公众平台配置为 request合法域名


✅ 六、常见问题排查

问题 原因 解决方案
请求失败,提示不在域名白名单 没有配置合法域名 登录微信公众平台配置 request 合法域名
HTTPS 报错(证书不安全) 证书未正确安装或浏览器不信任 使用受信任的 CA 机构签发的证书
请求超时或无响应 Nginx 未启动或本地服务不可达 检查 Nginx 是否运行、本地服务是否可用
出现跨域错误 未配置 CORS 头部 添加 Access-Control-Allow-* 相关 header
微信开发者工具中无法请求 未开启“不校验合法域名” 测试阶段可在开发者工具中勾选“不校验合法域名”

✅ 七、完整配置文件结构总结

文件位置 内容说明
/etc/nginx/conf.d/api.conf 主要配置文件,定义监听端口、SSL、反向代理等
/etc/nginx/certs/*.crt, *.key SSL 证书和私钥文件
/etc/nginx/nginx.conf Nginx 主配置文件,建议保持默认即可

✅ 八、推荐部署流程图

1. 域名备案并配置 CNAME 到阿里云服务器
2. 申请并上传 SSL 证书
3. 编写 Nginx 配置文件(含 SSL + Proxy)
4. 重启 Nginx 服务
5. 配置微信小程序 request 合法域名
6. uni-app 发起 HTTPS 请求测试

如果你提供具体的接口服务类型(如 Node.js / Spring Boot)、是否使用云开发、是否需要 WebSocket 支持等信息,我可以为你定制更详细的 Nginx 配置模板和 uni-app 请求封装建议。

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐