Next.js:FetchError: 无效的 json 响应正文 JSON 中位置 0 处出现意外标记 <

Question

我正在尝试使用getStaticProps来简单地发出请求，然后将该数据从它传递到组件：

但我收到这个错误：

FetchError： https://www.ajmadison.com/product3.0/packages.index.json.php? sku=RF28R7351SR 处的 json 响应正文无效 原因：JSON 中位置 0 处出现意外标记 <

import AppliancePackage from '../components/AppliancePackage.jsx';

function HomePage({ data }) {
  return (
    <>
      <AppliancePackage appliances={data} />
    </>
  );
}

export default HomePage;

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do
// direct database queries. See the "Technical details" section.

export async function getStaticProps() {
  // Call an external API endpoint to get data.
  // You can use any data fetching library

  var res = await fetch(
    'https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR'
  );

   var json = await res.json();

   data = JSON.stringify(json);
   console.log('data ', data);

  return {
    props: {
      data: json,
    },
  };
}

我尝试将其字符串化，但这不起作用！我也对评论感到有点困惑：

该函数在服务器端构建时被调用。它不会在客户端被调用，因此您甚至可以直接进行数据库查询。请参阅“技术细节”部分。

然后正如您所看到的，有一条评论指出：

调用外部 API 端点来获取帖子。

但在他们的文档中有一个关于 API 路由的完整部分

任何人都可以帮助我这是怎么回事？

更新

Alexey 贡献了一些伟大的见解，但就像我对他说的那样，我在 axios 文档中找不到更改用户代理的信息！

Answer 1

我认为您所指的端点出于某种原因对“用户代理”敏感。

当我尝试像这样用 CURL 获取它时，它返回了一些 HTML 响应（当然这不是有效的 JSON）

curl https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR

但这样它确实可以工作并返回 JSON，就像通过浏览器访问一样：

curl -H "User-Agent: some browser" https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR  

TLDR：尝试在您的请求中添加“user-agent”标头。