1. 项目背景与核心痛点
七牛云作为国内主流的云存储服务商,其对象存储功能常被用于图片等静态资源托管。但在实际业务场景中,很多团队会遇到这样的困境:前端需要直传图片到七牛云,而后端服务又要与前端保持数据交互,传统方案往往会导致跨域问题或安全风险。我最近为一个电商项目设计了一套完整解决方案,在不影响现有前后端通信架构的前提下,实现了安全高效的图片上传流程。
这个方案的核心价值在于:
- 保持前后端原有API交互不变
- 图片上传完全由前端直传七牛云,减轻服务器带宽压力
- 通过子域名隔离实现权限控制
- 全程HTTPS保障数据传输安全
- 上传后自动返回标准化URL格式
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 整体流程图解
code复制前端页面 -> 调用后端获取上传凭证 -> 直传七牛云存储桶
-> 返回图片URL -> 将URL提交给后端 -> 存入业务数据库
2.2 关键组件说明
- 子域名策略:为图片服务单独配置img.yourdomain.com子域名
- SSL证书:使用通配符证书覆盖所有子域名
- CORS配置:在七牛云控制台精确设置允许的源域名
- 临时凭证:后端动态生成带时效的上传token
重要提示:千万不要在前端硬编码AccessKey/SecretKey,必须通过后端接口动态获取临时凭证
3. 详细实现步骤
3.1 域名与证书配置
- 在DNS解析中添加img子域名记录,CNAME指向七牛云提供的加速域名
- 申请通配符SSL证书(如*.yourdomain.com)
- 在七牛云「域名管理」绑定自定义域名并上传证书
bash复制# 检查DNS解析是否生效
dig img.yourdomain.com +short
3.2 后端凭证服务实现
以Node.js为例的临时凭证生成:
javascript复制const qiniu = require('qiniu')
router.get('/upload-token', (req, res) => {
const accessKey = process.env.QINIU_AK
const secretKey = process.env.QINIU_SK
con
