7

我正在尝试使用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 文档中找不到更改用户代理！

4

4 回答 4

2

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

当我尝试像这样使用 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：尝试在您的请求中添加“用户代理”标头。

于 2020-07-17T19:11:13.120 回答
2

阿列克谢让我走上了正轨！朋友，谢谢！

结束了你必须这样做：

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': '*',
  },

对于*任何User-Agent

于 2020-07-17T20:16:38.873 回答
1

对我来说，它被.json()称为响应正文中返回 HTML 的 HTTP 错误

于 2021-07-16T14:39:48.397 回答
1

而不是在中使用res.status(200).json(data)，api file使用res.status(200).json(JSON.stringify(data))。这将消除控制台中的 JSON 错误。这对我有用。

于 2021-04-03T18:56:55.313 回答