HTML网站访问出现404错误如何修复-html教程-PHP中文网

404错误本质是服务器未找到请求资源，需路径、配置、状态码三者严格匹配：文件须在web根目录对应位置（如nginx的/usr/share/nginx/html），url路径须与文件系统路径完全一致（区分大小写和扩展名），且服务器必须返回真实http 404状态码（需通过curl -i验证），本地file:///访问不触发404。

html网站访问出现404错误如何修复

404 错误不是页面写错了，而是服务器根本没找到那个文件——路径、配置、状态码三者只要一个不匹配，就必然 404。

检查文件是否真在 Web 根目录对应位置

本地双击 file:/// 打开不会触发 404，那只是浏览器读磁盘；真正的 404 只发生在 HTTP 请求中。必须用 http://localhost/xxx.html 这类地址访问才有效。

确认 HTML 文件实际放在 Web 服务器的根目录下：Apache 是 htdocs，Nginx 是 /usr/share/nginx/html，Tomcat 是 webapps/yourapp/（且该目录含 WEB-INF/）
URL 路径必须和文件系统路径严格一致：如果文件是 /pages/about.html，就得访问 http://localhost/pages/about.html
Windows 上注意隐藏扩展名，about.html.txt 看起来像 about.html，但服务器找不到
Linux/macOS 区分大小写：About.html ≠ about.html

验证服务器是否返回真实 404 状态码

只放一个 404.html 在根目录，不配服务器，99% 的情况返回的是 200 状态码——搜索引擎当它是正常页，用户刷新也得不到重试提示。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

Nginx 正确配置：error_page 404 /404.html; + location = /404.html { internal; }，漏掉 internal 会导致外部可直连，状态码变成 200
Apache 用 ErrorDocument 404 /404.html，确保 mod_alias 已启用
配完务必用 curl -I http://localhost/nonexistent 检查响应头，确认是 HTTP/1.1 404 Not Found，不是 200 OK
GitHub Pages 要求文件叫 404.html 且放在仓库根目录；/docs/404.html 无效

排查前端跳转路径拼接错误

location.href = "user/profile" 这种写法，浏览器会以当前 URL 为基准拼接。比如当前在 /admin/ 下，实际发出请求是 /admin/user/profile，而非你想要的根路径 /user/profile。

改用绝对路径：location.href = "/user/profile"（开头带 /）
动态拼接更安全：new URL("user/profile", window.location).href，自动处理上下文
别依赖 ./ 前缀——有些服务器或构建工具会忽略它，行为不一致
检查 <base href="/subapp/"> 是否存在且与构建配置（如 Vite 的 base、CRA 的 homepage）完全一致；未用子路径部署就别写 <base>

确认服务端是否拦截了前端路由

前后端同域部署时（比如都走 https://api.example.com），前端跳到 /order/list，结果被后端 Express/Spring Boot 的同名 API 路由提前捕获，返回 JSON 或 404，前端路由压根没执行。

打开开发者工具 → Network 标签页，看 404 请求的 Response Headers 中 Content-Type 是 application/json 还是 text/html
如果是前者，说明后端已响应，需调整后端路由优先级，或给前端路由统一加前缀（如 /app/order/list）
检查后端日志，确认该路径是否真有 handler，避免“撞名”覆盖
Vue Router / React Router 启用 history 模式时，Nginx 必须配 try_files $uri $uri/ /index.html;；本地用 npx serve 不支持 fallback，得换 vite preview