内部 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.

我现在被困住了。不知道我还能用谷歌搜索什么来更深入地研究这个问题。我缺乏网络开发经验在这里困扰着我。任何帮助是极大的赞赏。

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

好吧，因为你正在使用 fetch() 并且你想使用 get 方法，所以可能不需要指定方法作为 get 你可以直接执行此操作 里面

const FetchResponse = await fetch('/api/documentation')
const documentation = await FetchResponse.json()
if(documentation) setDocumentation(documentation)

对于 /api/documentation.js 好好检查你的代码我真的不知道你为什么这样做

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);
}

我猜你是想发回对 api 调用的响应……如果是这样，那不是正确的方法…… 下面可以做

const do_something = async (res) =>{
  // fetch documentation from db using sequelize or direct sql
  //when done you can send back the results via api response
if(results) return res.status(200).send(results); // you back the results like this
return res.status(500).send("Ooops! something went wrong");
}
  export default async function documentationHandler(req, res) {  
  if (req.method === 'GET') return await do_something()//get data from db
  res.status(403).send('Forbidden');
  }