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

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')

router.get('/upload/token', (req, res) => {
  const accessKey = process.env.QINIU_AK
  const secretKey = process.env.QINIU_SK
  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
  
  const options = {
    scope: 'your-bucket-name',
    expires: 3600,
    returnBody: '{"key":"$(key)","hash":"$(etag)","size":$(fsize)}'
  }
  
  const putPolicy = new qiniu.rs.PutPolicy(options)
  const uploadToken = putPolicy.uploadToken(mac)
  
  res.json({ token: uploadToken })
})

3.2.2 处理回调验证

javascript复制const bodyParser = require('body-parser')
app.use(bodyParser.json())

router.post('/qiniu/callback', (req, res) => {
  const authHeader = req.headers['authorization']
  const callbackBody = JSON.stringify(req.body)
  
  // 验证回调签名
  const sign = crypto
    .createHmac('sha1', process.env.QINIU_SK)
    .update(callbackBody)
    .digest('base64')
    
  if (`Qiniu ${sign}` === authHeader) {
    // 保存文件信息到数据库
    const { key, hash, size } = req.body
    FileModel.create({ key, hash, size })
    res.json({ success: true })
  } else {
    res.status(403).json({ error: 'Invalid signature' })
  }
})

3.3 前端实现（React示例）

3.3.1 上传组件封装

jsx复制import { useState } from 'react'
import axios from 'axios'

export default function Uploader({ onSuccess }) {
  const [progress, setProgress] = useState(0)
  
  const handleUpload = async (file) => {
    // 1. 获取上传凭证
    const { data: { token } } = await axios.get(
      'https://api.example.com/upload/token'
    )
    
    // 2. 构造FormData
    const formData = new FormData()
    formData.append('file', file)
    formData.append('token', token)
    formData.append('key', `uploads/${Date.now()}_${file.name}`)
    
    // 3. 上传到七牛云
    const { data } = await axios.post(
      'https://upload.example.com',
      formData,
      {
        onUploadProgress: (e) => {
          setProgress(Math.round((e.loaded / e.total) * 100))
        }
      }
    )
    
    // 4. 触发回调
    onSuccess(data)
  }
  
  return (
    <input 
      type="file" 
      onChange={(e) => handleUpload(e.target.files[0])} 
    />
  )
}

4. Nginx关键配置

4.1 上传子域名配置

nginx复制server {
    listen 443 ssl;
    server_name upload.example.com;
    
    ssl_certificate /path/to/wildcard.crt;
    ssl_certificate_key /path/to/wildcard.key;
    
    location / {
        proxy_pass https://up.qiniup.com;
        proxy_set_header Host up.qiniup.com;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

4.2 静态资源子域名配置

nginx复制server {
    listen 443 ssl;
    server_name static.example.com;
    
    ssl_certificate /path/to/wildcard.crt;
    ssl_certificate_key /path/to/wildcard.key;
    
    location / {
        proxy_pass https://your-bucket-domain.qiniudn.com;
        proxy_set_header Host your-bucket-domain.qiniudn.com;
    }
}

5. 安全优化措施

5.1 凭证管理方案

• 使用环境变量存储AK/SK
• 开发/生产环境使用不同密钥对
• 定期轮换访问密钥（建议每3个月）

5.2 上传策略限制

javascript复制// 在生成token时添加更多限制
const options = {
  scope: 'your-bucket-name',
  expires: 3600,
  mimeLimit: 'image/*',
  fsizeLimit: 5 * 1024 * 1024, // 5MB
  callbackUrl: 'https://api.example.com/qiniu/callback',
  callbackBody: '{"key":"$(key)","hash":"$(etag)"}'
}

6. 常见问题排查

6.1 跨域问题排查清单

1. 检查七牛云控制台CORS配置
2. 确认Nginx配置包含正确的CORS头：

   nginx复制add_header 'Access-Control-Allow-Origin' 'https://www.example.com';
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
   

3. 前端请求是否携带了正确的Content-Type

6.2 回调验证失败处理

1. 检查七牛云回调地址是否HTTPS
2. 验证服务器时间是否同步（使用NTP）
3. 检查回调body是否被中间件修改

7. 性能优化建议

7.1 前端优化

• 实现分片上传（使用qiniu-js SDK）
• 添加图片压缩预处理（使用compressorjs）
• 实现上传队列管理

7.2 后端优化

• 对上传token进行缓存（Redis）
• 实现token自动刷新机制
• 添加速率限制（rate limit）

这套方案在我们电商项目中实际运行了18个月，日均处理图片上传2.3万次，稳定性达到99.99%。关键点在于通过子域名隔离上传流量，同时利用Nginx的反向代理能力统一管理SSL证书，既保证了安全性，又不会影响主业务的API性能。