详细原理讲解
开源地址
https://cnb.cool/qiqinb/alicdn-imgbed
使用说明
核心原理
Ali ImgBed 的核心流程是：
sequenceDiagram
participant Browser as 用户浏览器
participant Server as Ali ImgBed 服务端
participant Aliyun as 阿里云开发者社区
participant OSS as 阿里云 OSS
participant CDN as 阿里云 CDN
Browser->>Server: 粘贴 Cookie
Server->>Browser: 校验 c_csrf 和 login_aliyunid_ticket
Browser->>Server: 上传图片文件
Server->>Aliyun: 获取图片上传地址
Aliyun-->>Server: 返回图片上传地址鉴权URL
Server->>OSS: PUT图片字节和签名请求头
OSS-->>Server: 上传成功
Server-->>Browser: 返回imageUrl
Browser->>CDN: 通过CDN地址预览图片
CDN-->>OSS: 回源获取文件内容
OSS->>CDN: 返回文件内容
CDN-->>Browser: 返回图片数据，成功访问图片！1. 用户登录并获取 Cookie
本项目不直接模拟用户登录，也不处理账号密码、MFA、验证码或短信验证。
用户需要先在自己的浏览器中登录阿里云开发者社区，然后从浏览器开发者工具的 Network 请求中复制完整的 Cookie 请求头。
Cookie 通常需要包含：
c_csrf=...
login_aliyunid_ticket=...其中：
c_csrf是请求接口时使用的 CSRF 参数。login_aliyunid_ticket是阿里云登录票据。- 其他 Cookie 也需要尽可能完整保留，因为阿里云接口可能依赖完整登录上下文。
Cookie 被提交到当前运行的 Ali ImgBed 服务端后，只保存在服务进程内存中，不写入项目文件、数据库或日志。服务重启后，需要重新粘贴 Cookie。
2. 请求阿里云上传地址
服务端调用阿里云图片上传接口：
POST https://developer.aliyun.com/developer/api/image/getImageUploadUrl请求地址需要携带 p_csrf 参数：
p_csrf=<Cookie 中的 c_csrf>请求示例：
POST https://developer.aliyun.com/developer/api/image/getImageUploadUrl?p_csrf=example_csrf请求头：
Accept: */*
Content-Type: application/json
Cookie: c_csrf=...; login_aliyunid_ticket=...; ...
Origin: https://developer.aliyun.com
Referer: https://developer.aliyun.com/article/new这里的 Referer 是接口校验的一部分：
https://developer.aliyun.com/article/new如果缺少 Cookie、p_csrf 不正确，或者请求没有正确的 Referer，阿里云接口可能返回 401、403 或登录失效错误。
请求体：
{
"imageName": "example.jpg",
"imageSize": 12345678
}字段说明：
| 字段 | 说明 |
|---|---|
imageName | 图片文件名 |
imageSize | 图片大小，单位为 Byte |
支持的图片扩展名包括：
.png
.gif
.pjp
.jff
.jpe
.pjpeg
.jpeg
.jpg3. 获取临时 OSS 上传地址
阿里云接口成功后，会返回一个临时签名上传地址：
{
"success": true,
"code": "200",
"message": "获取上传地址成功！",
"requestId": "example-request-id",
"data": {
"uploadUrl": "http://ucc-image.oss-cn-beijing.aliyuncs.com/...",
"imageUrl": "https://ucc.alicdn.com/pic/developer-ecology/example.jpg",
"header": {
"x-oss-meta-author": "ucc",
"content-type": "image/jpg",
"Content-Length": "402602"
}
}
}其中：
uploadUrl是带签名的临时 OSS 上传地址。imageUrl是上传完成后最终使用的 CDN 图片地址。header是 PUT 上传时必须携带的请求头。
uploadUrl 中通常包含：
Expires
OSSAccessKeyId
Signature这些参数构成一次临时授权。签名地址不应该长期保存，也不应该写入日志或公开分享。
4. PUT 上传图片
拿到 uploadUrl 后，服务端直接向该地址发起 PUT 请求，将图片原始字节上传到阿里云 OSS。
示例：
PUT http://ucc-image.oss-cn-beijing.aliyuncs.com/...
x-oss-meta-author: ucc
content-type: image/jpg
Content-Length: 402602请求体就是图片的二进制内容：
[图片原始字节]Node.js 伪代码：
const imageBytes = await fs.readFile(filePath);
const headers = {
...signed.header,
"Content-Length": String(imageBytes.length),
};
const response = await fetch(signed.uploadUrl, {
method: "PUT",
headers,
body: imageBytes,
});
if (!response.ok) {
throw new Error(`OSS 上传失败：${response.status}`);
}上传成功后，服务端将 imageUrl 返回给前端。
5. 返回 CDN 图片地址
最终返回给前端的地址类似：
https://ucc.alicdn.com/pic/developer-ecology/example.jpg前端可以将这个地址用于：
- 图片预览
- 复制直链
- Markdown
- HTML
- 新窗口打开
Markdown 示例：
HTML 示例：
<img
src="https://ucc.alicdn.com/pic/developer-ecology/example.jpg"
alt="example"
referrerpolicy="no-referrer"
>6. Referer 限制
阿里云 CDN 图片地址和上传接口的 Referer 规则不同。
上传接口
调用阿里云获取上传地址时，需要携带固定 Referer：
Referer: https://developer.aliyun.com/article/new缺少该 Referer 可能导致接口返回 403 Forbidden。
CDN 图片嵌入
将 ucc.alicdn.com 图片嵌入其他网页时，阿里云 CDN 可能会校验 Referer。为了避免浏览器发送当前网站地址，需要设置：
<meta name="referrer" content="no-referrer">并在图片标签上设置：
<img
src="https://ucc.alicdn.com/pic/developer-ecology/example.jpg"
referrerpolicy="no-referrer"
alt="example"
>也可以使用响应头：
Referrer-Policy: no-referrer项目中的图片预览已经使用：
<img referrerpolicy="no-referrer">并追加缓存参数，避免浏览器缓存之前因为 Referer 导致的失败结果。
