NextJS - getServerSideProps - 错误 400 - 错误请求

Question

我在 NEXT JS 中使用 getServerSideProps 函数进行 fetch 时遇到问题。当我开始使用这个框架时，我可能做得不好。访问外部 API 的所有凭据都是正确的。当我在 React 中使用相同的参数进行获取时，它会为我带来信息，但是使用 Next JS 它会返回 400 - 错误请求。

\n

我将所有参数放在下面同一个块代码中，以便于理解。我使用像“”这样的凭据参数来保护隐私。他们是正确的，没有任何问题。

\n

注意：我相信我一定以错误的方式使用了 getServerSideProps 函数。我不知道除了编写函数之外是否还需要对 Next JS 进行任何配置。换句话说，这里显示的是我到目前为止实际写的内容。该程序直接从index.js 调用。

\n

这是文件夹结构：

\n

文件夹结构

\n

ListOrders 是我渲染页面的地方。它从我执行提取操作的 getServerSideProps 函数接收 {orders} 作为 props。

\n

const ListOrders = ({ orders }) => {\n  // Render orders through server side rendering (SSR)\n  return (\n    <div>\n      {/* If orders is an object than map over it to render the page, otherwise orders is an error message */}\n      {typeof orders != "string" && orders.length > 0 ? (\n        showOrders(orders)\n      ) : (\n        <h5>{orders}</h5>\n      )}\n    </div>\n  );\n};\n\nconst showOrders = (orders) => {\n  {\n    orders.list.map((o, i) => <h3 key={i}>{o.orderId}</h3>);\n  }\n};\n\nexport async function getServerSideProps() {\n  // URL PARMS\n  const accountName = "<conta>";\n  const environment = "<ambiente usado>";\n  const filter = "orders";\n\n  // OPTIONS PARMS\n  const accept = "application/json";\n  const contentType = "application/json; charset=utf-8";\n\n  // SET ACCESS CREDENTIALS\n  const appKey = "<chave>";\n  const appToken = "<token>";\n\n  // DEFINE URL TO FETCH LIST ORDERS WITH FILTER PARMS\n  const url = `https://${accountName}.${environment}.com.br/api/${filter}`;\n\n  // DEFINE OPTIONS ACCORDING TO API\n\n  const options = {\n    method: "GET",\n    headers: {\n      Accept: accept,\n      "Content-Type": contentType,\n      "API-AppKey": appKey,\n      "API-AppToken": appToken,\n    },\n  };\n\n  // FETCH LIST ORDERS\n  const res = await fetch(url, options);\n\n  if (!res.ok) {\n    //*! Fetch error: Client (400\xe2\x80\x93499) or Server errors (500\xe2\x80\x93599) (Return error message to the page)\n    const qs_str = JSON.stringify(options.qs);\n    const headers_str = JSON.stringify(options.headers);\n\n    const statusDescription = setStatusDescription(res.status);\n\n    const orders = `Error: ${res.status} ${statusDescription} ${url} ${options.method} - ${qs_str} - ${headers_str}`;\n    return { props: { orders } };\n  }\n\n  const data = await res.json();\n\n  if (!data) {\n    //*?  Fetch not found (Return 404 to the page)\n    return { notFound: true };\n  }\n\n  //* Fetch is OK and returning data as expected (Return object orders to the page)\n  const orders = JSON.parse(JSON.stringify(data)); \n  return { props: { orders } };\n}\n

\n

即使我更改了 axios 的 fetch，我仍然有相同的 400 错误。我知道这听起来很可悲，但我想指出的是，获取本身没有任何问题。问题应该出在 NEXT JS 的工作方式上。

\n

 // FETCH LIST ORDERS\n\n  let orders;\n\n  try {\n    const response = await axios.get(url, options);\n    //*? Fetch is OK and returning data as expected (Return object orders to the page)\n    const ordersList = response.data;\n    orders = JSON.parse(JSON.stringify(ordersList)); \n  } catch (error) {\n    //*! Fetch error: Client (400\xe2\x80\x93499) or Server errors (500\xe2\x80\x93599) (Return error message to the page)\n    const qs_str = JSON.stringify(options.qs);\n    const headers_str = JSON.stringify(options.headers);\n    orders = `Error 2: ${error} ${url} ${options.method} - ${qs_str} - ${headers_str}`;\n  }\n  return { props: { orders } };\n}\n

\n