修正幕後 404 錯誤

單頁應用程式可顯示不同內容,無需載入新頁面。為此,他們會在連結和 History API 上使用點擊處理常式。History API 可讓您控管瀏覽器工作階段記錄。這樣一來,我們就能在顯示不同頁面 (在單頁應用程式中通常稱為「檢視畫面」) 時更新網址。並確保瀏覽器的返回按鈕仍能正常運作。

我們來看看本程式碼研究室中的單一頁面應用程式。這張圖片會顯示貓或狗的圖片,並提供連結,可在兩種動物之間切換。這個做法似乎有效!

很抱歉,應用程式中有一項細微錯誤。讓我們來看看!

  • 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕
  • 按一下「Doggos」連結。請注意網址的變化。
  • 重新載入應用程式。

您會看到含有「Cannot GET /doggos」的頁面,這是一種隱藏的 404 錯誤。這項做法「隱密」,因為只要您只點選網頁應用程式中的連結,應用程式似乎就能正常運作。在新的瀏覽器視窗中使用網址或重新整理網頁時,會發生錯誤。問題是伺服器不知道如何回應這些網址的要求。網頁應用程式中的 JavaScript 程式碼會使用 History API 在這些網址之間導覽,但伺服器不知道該如何處理這些網址。當伺服器不知道如何處理要求的網址時,就會傳回 HTTP 狀態碼 404。使用此程式碼時,伺服器會指出找不到要求的網址。

在這種情況下,搜尋引擎不會為網址建立索引,因為使用者會點選搜尋結果,並找到錯誤訊息,但不會找到他們要找的內容,例如狗狗圖片。

修正伺服器

這個專案使用以 JavaScript 編寫的 express.js 伺服器。讓我們修正伺服器,讓它以 index.html 回應,而單一頁面應用程式會處理其餘部分。

  • 按一下「Remix to Edit」即可編輯專案。
  • 選取 server.js 檔案。

這個檔案含有伺服器程式碼。它會設定 express.js 伺服器,並傳送 index.html 的內容。當要求導向網址 / 時,第 15 行中的路由設定只會提供網頁應用程式。伺服器也應提供我們建立的其他網址。我們將這項設定變更為提供所有網址,這樣日後就能搭配其他網址使用。

為此,我們可以將第 15 行開始的程式碼變更為以下內容:

app.get('/*', function(request, response) {
  response
.sendFile(__dirname + '/views/index.html');
});

/* 會比對任何網址,而伺服器現在會針對任何指定網址,以 index.html 中的網路應用程式回應。

  • 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕

在新無痕視窗中重新整理及開啟連結,現在應該會正常運作。