打开了两个终端，一个是Strapi，一个是Next.JS，我在Strapi中设置好了配置，我想接收Next.JS中的API，在屏幕上显示出来，但是没有显示出来，然后出现了一个错误屏幕，我用Postman测试了一下，确认Get和Post都可以。
我的浏览器出现此错误。
第一个
index.js
import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import axios from "axios";
export async function getStaticProps() {
const foodsData = await (
await axios.get("http://localhost:1337/api/foods")
).data.data;
console.log(foodsData);
return {
props: {
foods: foodsData,
},
};
}
export default function Home({ foods }) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>Welcome to My Shopping</h1>
<div className={styles.grid}>
{foods.map((food, index) => (
<>
<a
href="https://nextjs.org/docs"
className={styles.card}
key={index}
>
<h2>{food.attributes.title}</h2>
<p>{food.attributes.description}</p>
<div>価格：{food.attributes.price}</div>
</a>
</>
))}
</div>
</main>
</div>
);
}这怎么能纠正？请帮帮我。
1条答案
按热度按时间yqlxgs2m1#
我遇到了同样的问题。请将http：//localhost：3000更改为http://127.0.0.1:1337