內部 Next.js API 調用返回 500 錯誤

Question

對於我的一生，我無法弄清楚為什么我正在進行的內部 API 調用 (Next.js) 不斷返回可怕的 500 錯誤。 這里的目標是調用內部 API (Next.js)，然后調用后端的 Flask 服務器以檢索一些數據（文檔）。

據我所知， pages/documentation.js中的調用不會執行api/documentation.js中的任何請求。 我在 Flask 服務器中設置了日志記錄，以注釋發出的任何請求。

在前端，我看到Unhandled Runtime Error - SyntaxError: The string did not match the expected pattern. . 在檢查控制台時，我看到500 Internal Server Error - http://localhost:3000/api/documentation && Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern.

我現在被困住了。 不知道我還能用谷歌搜索什么來更深入地研究這個問題。 我缺乏 web 開發經驗在這里咬我。 任何幫助是極大的贊賞。

/* pages/documentation.js */

 // State Variables
 const [documentation, setDocumentation] = useState(null);

  useEffect(() => {
    if (!documentation) {
      fetchDocumentation();
    }
  }, []);  

  // API Call to fetch documentation
  async function fetchDocumentation() {
    const fetchResponse = await fetch('/api/documentation', {
      method: 'get',
      headers: {
        'Content-type': 'application/json',
        'Accept': 'application/json'
      }
    });
    if (!fetchResponse.ok) {
      setDocumentation(await fetchResponse.text());
    } else {
      setDocumentation(await fetchResponse.json());
    }
  };

/* api/documentation.js */

import fetch from 'isomorphic-unfetch'
import getConfig from 'next/config'

const { publicRuntimeConfig } = getConfig();
const BACKEND_API_URL = publicRuntimeConfig.BACKEND_API_URL;

export default async function documentationHandler(req, res) {  
  if (req.method === 'GET') {
    let reqURL = BACKEND_API_URL + '/api/documentation';

    const backendResponse = await fetch(reqURL, {
      mode: 'cors',
      method: 'get',
      headers: {
        'Content-type': 'application/json',
        'Accept': 'application/json'
      }
    });
    if (!backendResponse.ok) {
      return res.status(backendResponse.status).send(await backendResponse.text());
    } else {
      const resp = await backendResponse.json();
      res.status(200).send(resp);
    }
  } else {
    res.status(403).send('Forbidden');
  }
}

Answer 1

我瀏覽了您的代碼...更改以下內容並給我反饋...

更改：內容類型：“應用程序/json”，更改為：“內容類型”：“應用程序/json”

並且還在你的 fetch() @ pages/document.js 內部將方法設置為 'Get' 而不是 'get'

因為在你的 api/document.js 你說 if(req.method === 'Get')

如果它是大寫字母 G，那么取值太相同了...我希望我在您的代碼中，但請做好並告知..

這可能看起來很傻，但請嘗試給我喂食