根本原因是服务器返回的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 响应可能掩盖你刚修好的头信息。