Cloudflare SSL 完全模式配置指南

问题背景

当 Cloudflare 开启「完全模式」或「完全（严格）模式」时，Cloudflare 与源站服务器之间必须使用 HTTPS 进行通信。

常见错误：

• 525 错误 (SSL Handshake Failed)：Cloudflare 无法与源站完成 SSL 握手
• Vite HMR WebSocket 连接失败：前端开发环境热更新失败

根本原因分析

525 错误的原因

1. Caddy 使用 Let's Encrypt HTTP-01 验证申请证书
2. 但 Cloudflare 开启了橙云代理，Let's Encrypt 的验证请求被拦截
3. Caddy 无法获取证书 → 443 端口没有有效 SSL → 525 错误

Vite HMR 失败的原因

链路：浏览器 (HTTPS) → Cloudflare → Caddy → Vite (HTTP)

浏览器强制要求 WebSocket 使用 wss://，但 Vite 默认配置不兼容。

解决方案对比

方案一：Cloudflare Origin 证书（推荐）

步骤 1：生成 Origin 证书

1. 进入 Cloudflare 控制台 → SSL/TLS → 源服务器

2. 点击 创建证书

3. 密钥类型选 RSA，有效期选 15 年

4. 下载两个文件：

   • origin.pem（证书）
   • origin.key（私钥）

步骤 2：上传证书到服务器

# 创建目录
mkdir -p /etc/caddy/certs

# 创建证书文件
nano /etc/caddy/certs/origin.pem
nano /etc/caddy/certs/origin.key

# 设置权限
chmod 600 /etc/caddy/certs/origin.key

步骤 3：修改 Caddyfile

your-domain.example.com {
    tls /etc/caddy/certs/origin.pem /etc/caddy/certs/origin.key
    reverse_proxy localhost:5173
}

步骤 4：重载 Caddy

systemctl reload caddy

方案二：DNS-01 验证（自动续期）

使用 Cloudflare DNS 验证，绕过 HTTP 验证的限制。

安装带 DNS 插件的 Caddy

xcaddy build --with github.com/caddy-dns/cloudflare

Caddyfile 配置

your-domain.example.com {
    tls {
        dns cloudflare {env.CF_API_TOKEN}
    }
    reverse_proxy localhost:5173
}

创建 Cloudflare API Token

1. 进入 Cloudflare → 我的个人资料 → API 令牌
2. 创建令牌，权限选择 Zone:DNS:Edit
3. 设置环境变量：

export CF_API_TOKEN="your-token-here"

方案三：灵活模式（不推荐生产环境）

将 Cloudflare SSL 模式改为「灵活 (Flexible)」，Cloudflare → 源站走 HTTP。

缺点：Cloudflare 到服务器这段是明文，安全性差。

方案四：Cloudflare Tunnel（最安全）

不需要公网 IP，不需要开放防火墙端口。

安装 cloudflared

wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb
dpkg -i cloudflared-linux-amd64.deb

创建隧道

cloudflared tunnel login
cloudflared tunnel create your-tunnel-name

Vite HMR 配置

无论使用哪种 SSL 方案，都需要配置 Vite 的 HMR：

// vite.config.ts
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 5173,
    hmr: {
      clientPort: 443,  // 强制 WebSocket 走 443 端口
    },
  },
})

完整链路说明

浏览器 → HTTPS (443) → Cloudflare → HTTPS (443) → Caddy → HTTP (5173) → Vite

• Cloudflare 侧：完全模式，处理外部 HTTPS
• Caddy：SSL 终止，使用 Origin 证书
• Vite：本地开发服务器，hmr.clientPort: 443

常见问题

Q: Origin 证书有效期多久？

A: 最多 15 年，免费，无需续期。

Q: Origin 证书可以用于直连吗？

A: 不行，Origin 证书只在 Cloudflare 代理下有效。直连会报不受信任。

Q: 已有 Let's Encrypt 证书怎么办？

A: 可以并存，但建议使用 Origin 证书避免验证问题。

参考链接

• Cloudflare Origin 证书文档
• Caddy DNS-01 验证
• Vite HMR 配置