我要招人

前端/移动开发面试题更新 2026-08-05

在项目部署到生产环境后，当用户刷新页面时有时会遇到 404 错误，请解释导致这一现象的常见原因，并说明你通常采用的解决方案。

前端/移动开发技术原理问题排查NginxNode.js

考察说明

考察候选人是否理解前端单页应用路由与服务器资源映射之间的关系，以及实际部署中如何配置后端以支持前端路由。

回答思路

  1. 【回答框架 1】单页应用（SPA）在客户端通过 History API 管理路由，URL 路径变化并不会向后端发起新的资源请求。后端默认只按路径匹配静态文件，找不到对应文件时返回 404，因此刷新时如果服务器没有将所有非文件请求回退到 index.html，就会出现 404。
  2. 【回答框架 2】解决方案是配置服务器端回退规则，将不存在的文件请求重写到应用入口 index.html。例如 Nginx 使用 try_files $uri $uri/ /index.html，Apache 使用 FallbackResource 或重写规则，Node.js 中则使用 express-history-api-fallback 或 connect-history-api-fallback。
  3. 【回答框架 3】此外还要注意静态资源路径、路由模式（history 与 hash）的差异，以及服务器是否需要配置相对路径或绝对路径。hash 模式使用 URL 的 hash 部分，不会导致刷新 404，但不利于 SEO。
  4. 【回答框架 4】部署到 CDN 或云服务时，也需要确认是否存在类似的回退配置。如果后端服务自己提供 API，还要区分 API 路由与静态资源路由，防止 API 请求也被重写到 index.html。
  5. 【关键点 1】SPA 路由刷新 404 的根本原因是后端无对应的路径资源，解决核心是配置服务器回退到入口 HTML。
  6. 【关键点 2】常见做法是 Nginx try_files 或 Apache FallbackResource 将未知路径重写至 index.html。
  7. 【关键点 3】hash 路由（如 /#/about）可以规避刷新 404，但会使 URL 不美观且 SEO 支持较差。
  8. 【关键点 4】需区分 API 与页面路由，避免将 API 请求也重写到 HTML。
  9. 【关键点 5】实际部署时具体解决方案取决于 Web 服务器类型，并需结合静态资源路径和缓存策略。
  10. 【易错点 1】盲目将所有请求都重写到 index.html，可能导致 API 请求被错误处理。
  11. 【易错点 2】忽略静态资源（如 JS、CSS）的缓存策略，可能导致刷新后仍加载旧资源或缓存导致的 404。
  12. 【易错点 3】在 CDN 或云服务上未正确配置回退规则，可能导致同样的问题。