最近，我負責上線一個新的前端平臺，部署在 Nginx 上。最初訪問時一切正常，但當我 刷新頁面 時，卻突然出現了 404 Not Found。這讓我意識到，可能是 Nginx 的靜態(tài)資源路徑 出了問題。于是，我深入排查了這個 404 問題，并整理成這篇博文，希望能幫助遇到類似情況的朋友。

靜態(tài)資源路徑問題（單頁應用 SPA）

如果 Nginx 用于托管 Vue、React、Angular 等前端單頁面應用（SPA），刷新后 404 可能是因為 Nginx 直接查找 URL 對應的物理路徑，而前端路由交由 JavaScript 處理。

解決方案：使用 try_files

修改 nginx.conf，確保 location / 配置如下：

location / {
    root /var/www/html;
    index index.html;
    try_files $uri /index.html;
}

解釋：

• try_files $uri /index.html;：如果找不到請求的文件，則返回 index.html，前端路由框架再解析路徑。
• 適用于 Vue Router、React Router 這類 前端路由模式為 history 的情況。

Nginx 資源路徑 (root 或 alias) 配置錯誤

如果 root 或 alias 路徑錯誤，Nginx 找不到資源文件，導致刷新時返回 404。

示例：正確的 root配置

server {
    listen 80;
    server_name example.com;

    root /var/www/html;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

錯誤示例（容易導致 404）：

location / {
    alias /var/www/html/;
    index index.html;
}

alias 不能直接用于目錄，應使用 root。

瀏覽器緩存或 Nginx 緩存影響

如果修改了 Nginx 配置，但仍然 404，可能是緩存問題。

清除瀏覽器緩存

按 Ctrl + Shift + R 或在開發(fā)者工具（F12）中 禁用緩存 后嘗試刷新。

給靜態(tài)資源加版本號

在 index.html 中修改引用的 JS/CSS：

<script src="/js/app.js?v=1.0.1"></script>

這樣可避免緩存問題。

Nginx 關閉緩存

如果靜態(tài)資源仍然被緩存，可在 nginx.conf 添加：

location / {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

然后重啟 Nginx：

systemctl restart nginx

反向代理 (proxy_pass) 配置錯誤

如果 Nginx 代理了后端 API（如 Node.js、Python Flask），刷新后 404 可能是因為請求路徑未正確轉發(fā)。

示例：正確的反向代理

location /api/ {
    proxy_pass http://backend_server:8080/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

檢查點：

確保 backend_server:8080 服務可用。

proxy_pass 后必須帶 /，否則會拼接路徑導致 404。

錯誤示例（容易導致 404）：

location /api {
    proxy_pass http://backend_server:8080;
}

這里 /api 缺少 /，會導致 http://backend_server:8080api/... 這樣的錯誤路徑。

Nginx 日志分析

如果以上方法仍未解決問題，可以查看 Nginx 訪問日志 和 錯誤日志 進行分析：

# 查看訪問日志
tail -f /var/log/nginx/access.log

# 查看錯誤日志
tail -f /var/log/nginx/error.log

如果錯誤日志中出現類似：

[error] 404 No such file or directory

說明請求的資源路徑錯誤，可能需要檢查 root 或 try_files 配置。

Nginx 配置變更后未重啟

如果修改了 nginx.conf 但未生效，可能是 Nginx 未重新加載配置。

解決方案

nginx -t   # 先測試配置是否正確
systemctl restart nginx  # 重啟 Nginx

總結

按照本文方法排查，相信可以快速找到 Nginx 刷新后 404 的真正原因，并順利解決問題！

到此這篇關于Nginx前端頁面刷新后出現404的原因與解決方案的文章就介紹到這了,更多相關Nginx頁面刷新404內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論