Nextjs and strapi - TypeError: fetch failed

Questions and Answers Strapi Backend
1
System Information
  • Strapi Version:
  • Operating System:
  • Database:
  • Node Version:
  • NPM Version:
  • Yarn Version:

Hi,

I have used Strapi before with NextJS 12, but having started using 13 I keep encountering a TypeError: fetch failed.

The below is the code for the page where I want to display the API data. I have a commented out res from a placeholder site; this works fine. The issue lies with the request from Strapi. I can get a positive response from Postman and Thunder Client, but still get the fetch failed every time.

async function getDataFrom() {
  // const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const res = await fetch("http://localhost:1337/api/services/1");
  return res.json();
}

async function page() {
  const data = await getDataFrom();
  console.log(data);
  return (
    <div className=" bg-gray-200">
      
      <h1>API STUFF</h1>
      {data.map((item) => {
        return <div>{item.title}</div>;
      })}
    </div>
  );
}

The below is my middlewares.js file


module.exports = [
  "strapi::errors",
  "strapi::security",
  {
    name: "strapi::cors",
    resolve: "strapi::cors",
    config: {
      origin: "*",
      methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
      headers: ["Content-Type", "Authorization"],
      expose: ["Content-Range", "X-Content-Range"],
      credentials: true,
      maxAge: 86400,
    },
  },
  "strapi::poweredBy",
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];```



Any advice would be gratefully received, thanks.
2

No asnwer is there for the err
but you must replace the fetch("http://localhost:1337/api/services/1") to fetch("http://YOUR IP ADDRESS:1337/api/services/1");

3

This is probably a little late but for anybody else who comes past here like I did in frustration, replace http://localhost:1337 with http://127.0.0.1:1337.

4

thanks, that works