快捷導(dǎo)航

Nginx前端頁面刷新后出現(xiàn)404的原因與解決方案

更新時(shí)間：2025年03月19日 09:19:38 作者：XMYX-0

這篇文章主要來為大家詳細(xì)介紹一下Nginx前端頁面刷新后出現(xiàn)404 Not Found的原因與對(duì)應(yīng)的解決方案,有需要的小伙伴可以根據(jù)情況參考一下

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

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

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

解決方案：使用 try_files

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

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

解釋：

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

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

如果 root 或 alias 路徑錯(cuò)誤，Nginx 找不到資源文件，導(dǎo)致刷新時(shí)返回 404。

示例：正確的 root配置

server {
    listen 80;
    server_name example.com;

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

錯(cuò)誤示例（容易導(dǎo)致 404）：

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

alias 不能直接用于目錄，應(yīng)使用 root。

瀏覽器緩存或 Nginx 緩存影響

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

清除瀏覽器緩存

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

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

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

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

這樣可避免緩存問題。

Nginx 關(guān)閉緩存

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

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

然后重啟 Nginx：

systemctl restart nginx

反向代理 (proxy_pass) 配置錯(cuò)誤

如果 Nginx 代理了后端 API（如 Node.js、Python Flask），刷新后 404 可能是因?yàn)檎?qǐng)求路徑未正確轉(zhuǎn)發(fā)。

示例：正確的反向代理

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

檢查點(diǎn)：

確保 backend_server:8080 服務(wù)可用。

proxy_pass 后必須帶 /，否則會(huì)拼接路徑導(dǎo)致 404。

錯(cuò)誤示例（容易導(dǎo)致 404）：

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

這里 /api 缺少 /，會(huì)導(dǎo)致 http://backend_server:8080api/... 這樣的錯(cuò)誤路徑。

Nginx 日志分析

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

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

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

如果錯(cuò)誤日志中出現(xiàn)類似：

[error] 404 No such file or directory

說明請(qǐng)求的資源路徑錯(cuò)誤，可能需要檢查 root 或 try_files 配置。

Nginx 配置變更后未重啟

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

解決方案

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

總結(jié)

問題	解決方案
前端 SPA 應(yīng)用（Vue/React）刷新 404	try_files $uri /index.html;
Nginx root 或 alias 路徑錯(cuò)誤	確保 root 指向正確的靜態(tài)文件目錄
瀏覽器緩存問題	清除緩存、添加版本號(hào)、禁用 Nginx 緩存
反向代理 proxy_pass 404	確保 proxy_pass 語法正確，后端服務(wù)可用
Nginx 配置修改未生效	nginx -t 檢查語法，systemctl restart nginx 重啟

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

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

您可能感興趣的文章: