根本原因是服务器返回的Content-Type响应头错误，如application/octet-stream或text/plain，导致浏览器无法识别为HTML而触发下载；常见于静态托管、Nginx/Apache配置缺失、Express未显式设类型等场景。
为什么浏览器直接打开 HTML 文件会触发下载而不是预览
根本原因不是文件本身，而是服务器返回的 Content-Type 响应头错误。当服务器把 .html 文件当作 application/octet-stream 或 text/plain 发送时，浏览器无法识别为可渲染的 HTML，就会启动下载行为。
常见触发场景：
- 静态文件托管服务（如 GitHub Pages、Vercel）配置了错误的 MIME 类型映射
- Nginx / Apache 未正确声明
.html的Content-Type - 后端框架（如 Express、Flask）用
res.sendFile()或send_file()但没显式设置Content-Type - 本地双击打开
file://协议时遇到跨域限制（但这通常不会导致下载，仅影响 JS/CSS 加载）
Nginx 中修复 HTML 文件被下载的问题
Nginx 默认对 .html 是正确的，但如果你自定义了 types 块或用了第三方配置，可能覆盖了默认映射。检查并确保以下内容存在且未被注释或覆盖：
types {
text/html html htm;
}更稳妥的做法是在 server 或 location 块中强制指定：
立即学习“前端免费学习笔记（深入）”；
location ~ \.html$ {
add_header Content-Type text/html;
# 或使用更标准的方式（推荐）
types { }
default_type text/html;
}注意：default_type 仅在没有匹配 types 规则时生效，所以务必确认 types 块里有 text/html html 这一行。
Express 中 res.sendFile() 返回 HTML 却被下载？
这是高频踩坑点：Node.js 的 res.sendFile() 默认不设 Content-Type，如果文件扩展名未被 mime 库识别（比如路径含 query string、或文件名无后缀），它会 fallback 到 application/octet-stream —— 浏览器立刻下载。
解决方式（三选一）：
- 确保文件路径带
.html后缀，且文件真实存在 - 显式设置类型：
res.sendFile(path, { headers: { 'Content-Type': 'text/html' } }) - 用
res.set('Content-Type', 'text/html').sendFile(...)先设头再发文件
别依赖 res.send(fileContent) 替代 sendFile，因为大文件会吃内存，且失去流式传输和缓存控制能力。
如何快速验证当前响应头是否正确
不用重启服务，直接用 curl 查看响应头：
curl -I https://your-domain.com/index.html
关注输出中的这一行：
Content-Type: text/html; charset=UTF-8
如果看到的是 application/octet-stream、text/plain 或缺失该字段，就确认是服务端配置问题。Chrome 开发者工具的 Network 标签页也能看到，但 curl -I 更快、更干净，不受浏览器缓存或扩展干扰。
改完配置别忘了重载服务（nginx -s reload、pm2 restart 等），而且要清掉浏览器缓存——304 响应可能掩盖你刚修好的头信息。
