nginx通过try_files $uri $uri/ /index.html实现spa路由接管，配合location /api/ { proxy_pass ... }精准代理api请求，避免rewrite误伤静态资源，彻底解决history模式刷新404问题。
在前后端分离项目中，Nginx 通过 rewrite 和 location 配合，可以把所有前端路由（如 /user/profile、/admin/dashboard）统一指向 index.html，让前端路由库（如 Vue Router、React Router）接管，同时将 API 请求正确代理到后端服务。关键不是只靠 rewrite，而是用 try_files + location 匹配逻辑实现“单页应用（SPA）友好”的路由接管。
匹配非 API 请求，全部 fallback 到 index.html
这是核心逻辑：除了明确的静态资源（.js、.css、.png 等）和 API 接口路径（如 /api/、/v1/），其余所有请求都应返回 index.html，由前端 JS 路由解析。
推荐写法（放在 server 块内）：
location / {
try_files $uri $uri/ /index.html;
}说明：
– $uri 尝试匹配真实存在的静态文件（如 /assets/main.js）；
– $uri/ 尝试匹配目录（如 /doc/）；
– 最后 fallback 到 /index.html（注意是根路径下的 index.html，需确保该文件在 root 指定目录中）。
显式拦截 API 请求并反向代理
避免 API 请求也被 fallback 到 index.html，必须提前用 location 拦截所有后端接口路径，并转发给真实服务。
常见配置示例：
# 代理所有 /api/ 开头的请求
location /api/ {
proxy_pass https://www.php.cn/link/0dfcb085ff22eb1ccbbd440d9d0b1a97;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
<h1>或代理带版本前缀的接口，如 /v1/users</h1><p>location ^~ /v1/ {
proxy_pass <a href="https://www.php.cn/link/0dfcb085ff22eb1ccbbd440d9d0b1a97">https://www.php.cn/link/0dfcb085ff22eb1ccbbd440d9d0b1a97</a>;
}</p>注意：
– 使用 ^~ 前缀可提高匹配优先级，避免被正则 location 覆盖；
– proxy_pass 末尾是否加 / 决定路径重写行为（如 proxy_pass http://b/; 会剥离 /api/ 前缀）。
避免 rewrite 指令的误用
不建议用 rewrite ^/(.*)$ /index.html break; 这类全局重写，原因：
– 它会在匹配后立即重写 URI，绕过 try_files 的文件存在性检查，导致静态资源（如 /logo.png）也变成 /index.html 返回；
– 可能干扰正常代理逻辑，尤其与 location /api/ 共存时易出错。
真正需要 rewrite 的场景较少，例如：
– 统一移除或添加路径前缀（如把 /app/user → /user）；
– 兼容旧 URL 规则做跳转（301/302）；
– 但 SPA 的 fallback 行为，try_files 更安全、更高效。
补充：处理 history 模式下的 404 问题
Vue Router / React Router 使用 history 模式时，刷新 /user/123 页面会触发 Nginx 查找该路径对应文件——不存在就报 404。上述 try_files $uri $uri/ /index.html; 正是解决此问题的标准方案。
验证要点：
– 直接访问 https://example.com/ → 正常加载首页；
– 点击前端路由跳转到 /about → 正常显示；
– 刷新 /about 页面 → 仍返回 index.html（状态码 200），而非 404；
– 访问 /api/login → 正确代理到后端，不返回 index.html。
