咨询：通过Cloudflare分块发送HTML的可用配置或HTTP头

一、通过HTTP头控制 #

直接在响应中添加以下HTTP头，让Cloudflare放弃缓冲分块内容：

• Transfer-Encoding: chunked：明确声明响应为分块传输，强制Cloudflare透传每一块内容
• Cache-Control: no-cache, no-store, must-revalidate：禁用Cloudflare的响应缓存，避免合并分块
• X-Accel-Buffering: no：告知Cloudflare不要缓冲响应，直接实时转发给客户端

修改后的Node.js代码示例：

res.setHeader('Content-Type', 'text/html')
res.setHeader('Transfer-Encoding', 'chunked')
res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate')
res.setHeader('X-Accel-Buffering', 'no')

res.write('<html><head><style>/* 骨架样式内联 */ .skeleton { background: #eee; }</style></head><body><div class="skeleton">骨架内容</div>')
// 部分框架需手动触发内容发送
if (res.flush) res.flush()

await sleep(10_000)
res.write('<div>实际内容</div><script>document.querySelector(".skeleton").remove()</script></body></html>')
res.end()

二、Cloudflare控制台配置调整 #

如果HTTP头不生效，可在Cloudflare后台修改以下配置：

1. 禁用目标路径的缓存
   • 进入域名的「缓存」→「缓存规则」
   • 创建新规则，匹配你需要分块传输的URL路径（比如/dynamic-page）
   • 在「缓存设置」中选择「缓存级别：绕过」，保存规则
2. 关闭可能干扰的优化功能
   • 进入「速度」→「优化」，临时关闭「Rocket Loader」（它会延迟脚本执行，可能影响骨架替换逻辑），或在「Rocket Loader」设置中添加路径排除，跳过目标页面
   • 若开启了「自动压缩」，可测试临时关闭，避免压缩逻辑导致Cloudflare合并响应

三、注意事项 #

• 骨架部分的CSS建议内联，避免依赖外部样式表，确保浏览器能立即渲染骨架
• 原生Node.js的http.ServerResponse.write默认会自动推送内容，但Express等框架可能需要手动调用res.flush()
• 分块内容中除最后一块外，不要留下未闭合的标签，避免浏览器解析异常

内容的提问来源于stack exchange，提问作者Imaky