github 部署中未捕獲的語法錯誤

Question

我制作了一個簡單的網站，使用 Zomato API 根據您所在的城市推薦餐廳。它在本地完美運行，但是當我在 GitHub 頁面上部署時，它給了我以下信息

POST https://devangmukherjee.github.io/locations/delhincr 405
(anonymous) @   index.js:15

index.js:15 - const res = await fetch( ${hostname}/locations/${query} , {

和

index.js:24 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

index.js:24 是 });

回購協議在這里 - https://github.com/devangmukherjee/random-zomato-restaurant

這是一個非常小的 repo，只有三個文件。

網站鏈接在這里 - https://devangmukherjee.github.io/random-zomato-restaurant/

相同的代碼在本地完美運行。 我能做什么？

Answer 1

當您在本地訪問網站時，您也在本地主機上運行 Express 后端。 但是，當您在 GitHub 上訪問它時，您的后端並未在 GitHub 的機器上執行。 因此，當我在搜索字段中輸入“Mumbai”時，在const res = await fetch(`${hostname}/locations/${query}`, {你實際上正在獲取https://devangmukherjee.github.io /locations/mumbai 。因為 GitHub 的 URL 不允許 POST HTTP 方法（因為你的后端沒有在那里執行），你會得到一個 405 HTTP 錯誤。因此第一個錯誤。這個響應的主體是 HTML 而不是 88156988.78你在第 23 行執行res.json()時，當它找到第一個 HTML 標記的尖括號時出現解析錯誤。這就是你第二個錯誤的原因。

要使其正常工作，您必須將后端部署到其他地方，例如Vercel或Netlify無服務器功能或Heroku （以及許多其他可能性）。 然后，相應地更新第 4 行的hostname變量。