七牛云安全上传方案：前后端分离实践

1. 项目背景与核心需求

七牛云作为国内主流的云存储服务商，其图片上传功能被广泛应用于各类Web项目中。但在实际开发中，很多团队会遇到一个典型问题：当项目前后端分离部署时，直接在前端调用七牛云SDK上传图片会导致跨域问题，同时还会暴露存储空间的敏感配置信息。

这个方案要解决的核心痛点包括：

• 前端直传七牛云时的CORS跨域限制
• 避免在前端代码暴露AK/SK等敏感凭证
• 保持上传功能独立性的同时不影响现有API接口
• 实现HTTPS安全传输与域名统一管理

2. 技术方案设计

2.1 整体架构设计

采用"前端→业务服务器→七牛云"的间接上传模式：

1. 前端通过业务接口获取上传凭证
2. 业务服务器生成临时有效的上传token
3. 前端使用token直传七牛云存储空间
4. 上传完成后通过回调通知业务服务器

2.2 关键组件说明

2.2.1 子域名分配

• 主业务域名：api.example.com (处理常规API请求)
• 文件子域名：static.example.com (专用于资源访问)
• 上传子域名：upload.example.com (处理上传请求)

2.2.2 SSL证书配置

• 使用通配符证书 *.example.com
• 在Nginx配置中统一管理证书
• 为每个子域名配置独立的server块

3. 具体实现步骤

3.1 七牛云空间配置

1. 创建存储空间（建议选择华东区域）
2. 在空间设置中配置回调地址：

   bash复制http://api.example.com/qiniu/callback
   

3. 设置CORS规则允许业务域名：

   json复制[
     {
       "allowed_origin": ["https://www.example.com"],
       "allowed_method": ["GET","POST"],
       "max_age": 3600
     }
   ]
   

3.2 后端服务开发（Node.js示例）

3.2.1 生成上传凭证

javascript复制const qiniu = require('qiniu')