admin管理员组

文章数量:1026989

Two terminals are opened, one for Strapi and one for Next.JS. I have set up the configuration in Strapi. I want to receive the API in Next.JS and display it on the screen, but it does not show up. Then I get an error screen. I tested with Postman and confirmed that Get and Post can be done.

I get this error in my browser.

    Server Error
Error: connect ECONNREFUSED ::1:1337

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown> (Error: connect ECONNREFUSED
: (1:1337)
TCPConnectWrap.afterConnect [as onplete]
node:net (1237:16)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - piling...
event - piled client and server successfully in 393 ms (125 modules)
wait  - piling / (client and server)...
wait  - piling...
event - piled client and server successfully in 128 ms (144 modules)
wait  - piling /_error (client and server)...
wait  - piling...
event - piled client and server successfully in 56 ms (145 modules)
error - Error: connect ECONNREFUSED ::1:1337

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}>Wele to My Shopping</h1>
        <div className={styles.grid}>
          {foods.map((food, index) => (
            <>
              <a
                href=";
                className={styles.card}
                key={index}
              >
                <h2>{food.attributes.title}</h2>
                <p>{food.attributes.description}</p>
                <div>価格：{food.attributes.price}</div>
              </a>
            </>
          ))}
        </div>
      </main>
    </div>
  );
}

How can this be corrected? help me plese.

Two terminals are opened, one for Strapi and one for Next.JS. I have set up the configuration in Strapi. I want to receive the API in Next.JS and display it on the screen, but it does not show up. Then I get an error screen. I tested with Postman and confirmed that Get and Post can be done.

I get this error in my browser.

    Server Error
Error: connect ECONNREFUSED ::1:1337

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown> (Error: connect ECONNREFUSED
: (1:1337)
TCPConnectWrap.afterConnect [as onplete]
node:net (1237:16)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - piling...
event - piled client and server successfully in 393 ms (125 modules)
wait  - piling / (client and server)...
wait  - piling...
event - piled client and server successfully in 128 ms (144 modules)
wait  - piling /_error (client and server)...
wait  - piling...
event - piled client and server successfully in 56 ms (145 modules)
error - Error: connect ECONNREFUSED ::1:1337

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}>Wele to My Shopping</h1>
        <div className={styles.grid}>
          {foods.map((food, index) => (
            <>
              <a
                href="https://nextjs/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>
  );
}

How can this be corrected? help me plese.

  • javascript
  • next.js
  • strapi
  • bootstrap-image-gallery
Share Improve this question edited Jun 23, 2022 at 12:24 juliomalves 50.7k23 gold badges178 silver badges169 bronze badges asked Jun 21, 2022 at 21:39 naka shonaka sho 213 bronze badges 4
  • It looks like an issue with the strapi server. Taking next.js out of the equation, are you able to get data by doing curl http://localhost:1337/api/foods in the terminal (or making the request with a tool like postman) – Logan Anderson Commented Jun 22, 2022 at 2:32
  • We have confirmed that Postman can be used to receive and add json data to STRAPI. – naka sho Commented Jun 22, 2022 at 10:31
  • What Node.js version are you on? Have you tried replacing localhost:1337 with 127.0.0.1:1337? – juliomalves Commented Jun 25, 2022 at 18:23
  • Can you add code / instructions for how you are starting the Strapi server? (I am unable to re-produce this) – Logan Anderson Commented Jun 27, 2022 at 15:16
Add a ment  | 

1 Answer 1

Reset to default 8

I had this same issue. Change http://localhost:1337 to http://127.0.0.1:1337

Modified

The reason is that localhost and 127.0.0.1 are often interchangeable and give the same result, but we cannot say they are entirely synonymous.

You can read more about the two here: https://phoenixnap./kb/localhost-vs-127-0-0-1

PS: Thanks to my colleague and friend Simen Daehlin at Strapi

Two terminals are opened, one for Strapi and one for Next.JS. I have set up the configuration in Strapi. I want to receive the API in Next.JS and display it on the screen, but it does not show up. Then I get an error screen. I tested with Postman and confirmed that Get and Post can be done.

I get this error in my browser.

    Server Error
Error: connect ECONNREFUSED ::1:1337

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown> (Error: connect ECONNREFUSED
: (1:1337)
TCPConnectWrap.afterConnect [as onplete]
node:net (1237:16)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - piling...
event - piled client and server successfully in 393 ms (125 modules)
wait  - piling / (client and server)...
wait  - piling...
event - piled client and server successfully in 128 ms (144 modules)
wait  - piling /_error (client and server)...
wait  - piling...
event - piled client and server successfully in 56 ms (145 modules)
error - Error: connect ECONNREFUSED ::1:1337

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}>Wele to My Shopping</h1>
        <div className={styles.grid}>
          {foods.map((food, index) => (
            <>
              <a
                href=";
                className={styles.card}
                key={index}
              >
                <h2>{food.attributes.title}</h2>
                <p>{food.attributes.description}</p>
                <div>価格：{food.attributes.price}</div>
              </a>
            </>
          ))}
        </div>
      </main>
    </div>
  );
}

How can this be corrected? help me plese.

Two terminals are opened, one for Strapi and one for Next.JS. I have set up the configuration in Strapi. I want to receive the API in Next.JS and display it on the screen, but it does not show up. Then I get an error screen. I tested with Postman and confirmed that Get and Post can be done.

I get this error in my browser.

    Server Error
Error: connect ECONNREFUSED ::1:1337

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown> (Error: connect ECONNREFUSED
: (1:1337)
TCPConnectWrap.afterConnect [as onplete]
node:net (1237:16)

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
wait  - piling...
event - piled client and server successfully in 393 ms (125 modules)
wait  - piling / (client and server)...
wait  - piling...
event - piled client and server successfully in 128 ms (144 modules)
wait  - piling /_error (client and server)...
wait  - piling...
event - piled client and server successfully in 56 ms (145 modules)
error - Error: connect ECONNREFUSED ::1:1337

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}>Wele to My Shopping</h1>
        <div className={styles.grid}>
          {foods.map((food, index) => (
            <>
              <a
                href="https://nextjs/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>
  );
}

How can this be corrected? help me plese.

  • javascript
  • next.js
  • strapi
  • bootstrap-image-gallery
Share Improve this question edited Jun 23, 2022 at 12:24 juliomalves 50.7k23 gold badges178 silver badges169 bronze badges asked Jun 21, 2022 at 21:39 naka shonaka sho 213 bronze badges 4
  • It looks like an issue with the strapi server. Taking next.js out of the equation, are you able to get data by doing curl http://localhost:1337/api/foods in the terminal (or making the request with a tool like postman) – Logan Anderson Commented Jun 22, 2022 at 2:32
  • We have confirmed that Postman can be used to receive and add json data to STRAPI. – naka sho Commented Jun 22, 2022 at 10:31
  • What Node.js version are you on? Have you tried replacing localhost:1337 with 127.0.0.1:1337? – juliomalves Commented Jun 25, 2022 at 18:23
  • Can you add code / instructions for how you are starting the Strapi server? (I am unable to re-produce this) – Logan Anderson Commented Jun 27, 2022 at 15:16
Add a ment  | 

1 Answer 1

Reset to default 8

I had this same issue. Change http://localhost:1337 to http://127.0.0.1:1337

Modified

The reason is that localhost and 127.0.0.1 are often interchangeable and give the same result, but we cannot say they are entirely synonymous.

You can read more about the two here: https://phoenixnap./kb/localhost-vs-127-0-0-1

PS: Thanks to my colleague and friend Simen Daehlin at Strapi

本文标签： javascriptConnecting Strapi and NextJS but getting an errorStack Overflow

版权声明：本文标题：javascript - Connecting Strapi and Next.JS but getting an error - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745654354a2161508.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。