404页面失效主因是平台未识别404.html:必须置于根目录且严格命名为/404.html;对象存储需开启静态托管并绑定自定义域名防附件下载;前端路由需配置fallback及排除404重定向规则。

静态托管平台返回404,绝大多数情况不是页面写错了,而是平台根本没把它当“错误页”接管——它压根没看到你的 404.html。
确认404.html是否在正确位置和命名
GitHub Pages、Vercel、Netlify、Cloudflare Pages 这些平台只认一个确切路径和文件名:/404.html,且必须放在项目仓库或构建输出的根目录下。
- 写成
error404.html、pages/404.html、404.htm或404.HTML都无效 - 用 VS Code 保存时注意别带隐藏扩展名(比如 Windows 默认可能存成
404.html.txt) - 构建工具(如 Vite、Next.js)输出目录要确保
404.html被复制进最终的dist/或out/根目录
检查平台是否启用静态网站托管功能
OSS、COS 等对象存储平台需要手动开启「静态网站托管」开关,否则即使上传了 404.html,请求也会返回 XML 错误或直接下载,而不是渲染页面。
- 阿里云 OSS:进 Bucket → 数据管理 → 静态页面 → 开启并配置「默认首页」和「默认404页」
- 腾讯云 COS:控制台 → 静态网站托管 → 启用,并填相对路径(如
error.html,不能带协议或域名) - 用
curl -I https://your-bucket.oss-region.aliyuncs.com/xxx检查响应头:若返回Content-Type: application/xml,说明托管未开
避免直接用OSS/COS默认域名访问404页面
阿里云 OSS 配置了404页后,若仍提示 ERR_INVALID_RESPONSE 或空白响应,大概率是浏览器把响应当成了附件下载——因为 OSS 对 HTML 文件默认加了 Content-Disposition: attachment 头。
- 该行为仅发生在使用
bucket.region.oss-domain这类原始域名访问时 - 解决方案是绑定自定义域名(如
example.com),并配置 CNAME 和 HTTPS - CDN 缓存可能延迟生效,改完配置后用无痕窗口 + 强制刷新验证
排查本地开发与部署路径不一致
本地双击打开 file:/// 路径能看,但部署后 404,常因资源引用路径写死或依赖当前目录结构。
-
<img src="logo.png">在子页面(如/blog/post.html)中会尝试加载/blog/logo.png,而非根目录 - 统一用根相对路径:
<img src="/logo.png">(开头带/) - 前端路由(Vue Router / React Router)若用
history模式,需服务器 fallback 到/index.html,静态托管平台需按文档配重定向规则(如 Netlify 的_redirects)
最容易被忽略的是:404 页面本身是否被其他规则覆盖。比如在 Netlify 中,_redirects 里写了 /* /index.html 200 却没加 !/404.html 排除,结果所有路径(包括 /404.html)都被重写,导致真正的 404 页永远无法命中。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











