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

Next.js:FetchError:无效的json响应正文意外标记<;在JSON中的位置0,next.js,getstaticprops,Next.js,Getstaticprops,我尝试使用来简单地发出请求,然后将数据从中传递到组件: 但我得到了一个错误: FetchError:位于的json响应正文无效 原因:JSON中位置0处出现意外标记

我尝试使用来简单地发出请求,然后将数据从中传递到组件:

但我得到了一个错误:

FetchError:位于的json响应正文无效 原因:JSON中位置0处出现意外标记<

从“../components/AppliancePackage.jsx”导入AppliancePackage;
函数主页({data}){
返回(

谁能帮我什么事

更新


Alexey提供了一些很好的见解,但正如我对他说的,我在axios文档中找不到更改用户代理的方法!

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

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

但通过这种方式,它确实可以工作并返回JSON,就像通过浏览器访问:

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

TLDR:尝试将“用户代理”标题添加到您的请求中。

Alexey让我走上了正确的轨道!谢谢我的朋友

最后,你必须这样做:

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

  var res = await axios.get(
    'https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR',
    {
      headers: {
        Accept: 'application/json, text/plain, */*',
        'User-Agent': '*',
      },
    }
  );
  var res = JSON.stringify(res.data);
  console.log('res ', res);

  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      data: res,
    },
  };
}
这将添加标题:

  headers: {
    Accept: 'application/json, text/plain, */*',
    'User-Agent': '*',
  },

*
对于任何
用户代理

而不是在
api文件中使用
res.status(200).json(数据)
,使用
res.status(200).json(json.stringify(数据))
。这将消除控制台中的JSON错误。这对我来说很有效。

谢谢,但我试图查看
axios
文档来添加它,但找不到。你有什么想法吗?你试过这样做吗?
export async function getStaticProps() {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library

  var res = await axios.get(
    'https://www.ajmadison.com/product3.0/packages.index.json.php?sku=RF28R7351SR',
    {
      headers: {
        Accept: 'application/json, text/plain, */*',
        'User-Agent': '*',
      },
    }
  );
  var res = JSON.stringify(res.data);
  console.log('res ', res);

  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      data: res,
    },
  };
}
  headers: {
    Accept: 'application/json, text/plain, */*',
    'User-Agent': '*',
  },