内部 Next.js API 调用返回 500 错误

Question

For the life of me, I cannot figure out why an internal API call (Next.js) that I am making keeps returning the dreaded 500 error. The goal here is to make a call to the internal API (Next.js) and then make a call to a Flask server in the backend to retrieve some data (documentation).

From what I can tell, the call in pages/documentation.js does not execute any request within api/documentation.js . I have logging setup within the Flask server to annotate any requests that are made.

In the frontend, I am seeing Unhandled Runtime Error - SyntaxError: The string did not match the expected pattern. . And when inspecting the console I see 500 Internal Server Error - http://localhost:3000/api/documentation && Unhandled Promise Rejection: SyntaxError: The string did not match the expected pattern.

I am stuck at the moment. Not sure what else I can google to look deeper into this issue. My lack of web development experience is biting me here. Any help is greatly appreciated.

/* 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

I went through your codes... Change the following and give me a feed back...

Change:Content-type': 'application/json', To: 'content-Type': 'application/json'

And also Inside of your fetch() @ pages/document.js Set the Method to 'Get' instead of 'get'

Since in your api/document.js You stated if(req.method === 'Get')

If its a Capital G then make the fetch too same... i wish i was in your codes but well do it and do inform please..

This might seem silly but try and give me feed please