Nginx報404錯誤的詳細解決方法

2022-07-19 18:04:43

近日在部署專案時，出現了一些問題，如圖

正常的登入介面是可以存取的，但是在登入之後存取之後的地址會報404錯誤，於是去檢視是否設定有錯誤，但是檢視之後發現，nginx.conf與config.js兩個組態檔的ip和埠都是沒有錯誤的

這個專案部署過好多次，沒有出現過這樣的錯誤。

這是原版沒動過的解壓縮後的nginx.conf的原始檔

圈起來的地方是應該按照專案設定對應的ip和監聽的埠

listen對應的是埠，server_name對應的是存取的ip

但是這樣是不能解決問題，我們需要新增如下的一句話

try_files $uri $uri/ /index.html;

新增的位置應當在這裡

在server下的location段裡新增，此時再重新啟動nginx就可以了

在nginx.exe所在的目錄內，點選位址列，輸入cmd，可直接在該目錄下啟動命令列，無需開啟cmd後再跳轉目錄。

若之前沒有關閉nginx服務，先停止再開啟，如果已關閉，可以直接輸入啟動服務的命令

停止nginx服務命令：

nginx -s stop

啟動nginx服務命令：

start nginx

熱部署nignx服務命令：

（但是不推薦使用這個命令，這個命令有時候是不起作用的，不如直接停了再啟動）

nginx -s reload

重新啟動nginx後，瀏覽器最好是清除快取後再進行測試

可以直接在瀏覽器視窗按

Ctrl+Shift+Del

可直接開啟清除快取的對話方塊

重新測試，可以正常存取了

第一次寫經驗分享貼，如有不足之處，請大家提出

補充：Nginx部署之後正常點選沒問題，重新整理頁面會出現404問題的解決

專案部署到伺服器後，根路徑存取沒有問題（http:10.10.10.10）,但是進入其他功能再重新整理頁面就會出現404，比如

http:10.10.10.10/test/test/test 重新整理頁面就會出現404，因為你沒在nginx設定上面加上重定向跳轉。

解決辦法，只需要加上這段設定：

try_files $uri $uri/ /index.html;

server {
    listen 80;
    server_name 127.0.0.1;
	
	location / {
		root /data/htdocs/FactoryModel/micro-front-end/industrial-internet-platform-main-vue;
		index index.php index.html index.htm;
		# add_header Cache-Control;
		add_header Access-Control-Allow-Origin *;
		if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
		  add_header Cache-Control max-age=7776000;
		  add_header Access-Control-Allow-Origin *;
		}
		try_files $uri $uri/ /index.html;
	}
}

這句設定的意思是每次匹配url路徑時候找不到對應靜態資源時候調變跳轉到index.html檔案

如圖加在這裡即可

下面內容需要稍微知道router路由工作原理、nginx原理

解析為什麼會這樣（針對路由在history模式下）：

先提出問題:

1、為什麼重新整理頁面會（沒有設定情況下且不在首頁根目錄重新整理）
2、為什麼點選跳轉時候會（有時）

現在來解決問題：

1、假設現在在瀏覽器上的url為 172.1.2.3:7000/test ，此時重新整理頁面時候會去根據瀏覽器上的url去伺服器（nginx）上面請求對應的靜態資源，nginx根據location / 的匹配規則在dist資料夾裡沒有找到對應的靜態檔案"test"，所以返回404，合理。

此時通過設定try_files來重定向返回index.html檔案，也就是回去首頁“ / ”,注意，此時你的頁面已經重新整理過了，此時react-router或者vue-router路由發揮作用，會根據當前的url地址來對應匹配上元件，所以此時url即對應元件，頁面重新載入完成，完事。

2、第二個問題，為什麼點選跳轉時候會而有時候不會，要知道跳轉有兩種情況：一種頁面重新整理（屬於第一個問題），一種頁面不重新整理。這取決於你程式碼的書寫情況，請記住：

1、push不會重新整理頁面，只會更改瀏覽器上的url路由變更，不管是react-router還是vue-router都是運用html的api實現，叫做pushState()
2、通過會重新整理頁面，它相當於a標籤

可自行在瀏覽器上面試下

所以當你點選跳轉時候，有時候你程式碼用的是push（不重新整理）、有時候用的是a標籤、Link（重新整理），才導致這個問題。

總結

到此這篇關於Nginx報404錯誤的簡單解決方法的文章就介紹到這了,更多相關Nginx報錯404內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Nginx報404錯誤的詳細解決方法

熱門文章