strapi FetchError: request to http://localhost:1337/api/events failed, reason: connect ECONNREFUSED ::1:1337

Question

If I use my browser to access localhost:1337/api/events as a PUBLIC (Unauthenticated user) I get the following returned:

{"data":[{"id":1,"attributes":{"name":"Throwback Thursday with DJ Manny Duke","slug":"throwback-thursday-with-dj-manny-duke","venue":"Horizon Club","address":"919 3rd Ave New York, New York(NY), 1002","date":"2022-07-20T02:00:00.000Z","time":"10:00 PM","createdAt":"2022-04-12T02:05:08.246Z","updatedAt":"2022-04-12T02:17:16.760Z","publishedAt":"2022-04-12T02:05:16.192Z","performers":"DJ Manny Duke","description":"Description for the vent of DJ Manny Duke"}},{"id":2,"attributes":{"name":"Boom Dance Festival Experience","slug":"boom-dance-festival-experience","venue":"Blackjacks","address":"123 Lexington","date":"2022-04-25T16:00:00.000Z","time":"8:00 PM","createdAt":"2022-04-12T02:26:32.123Z","updatedAt":"2022-04-12T02:26:33.540Z","publishedAt":"2022-04-12T02:26:33.538Z","performers":"DJ LUKE, DJ BLACKJACK","description":"Whatever Description"}},{"id":3,"attributes":{"name":"Encore Night Boat Party","slug":"encore-night-boat-party","venue":"Encore","address":"12343 New York","date":"2022-11-14T16:00:00.000Z","time":"7:00 PM","createdAt":"2022-04-12T02:28:06.028Z","updatedAt":"2022-04-12T02:28:36.292Z","publishedAt":"2022-04-12T02:28:07.622Z","performers":"BAD BOY BILL","description":"Description of Encore"}}],"meta":{"pagination":{"page":1,"pageSize":25,"pageCount":1,"total":3}}}

However when I use Next.JS to access the same link I get:

FetchError: request to http://localhost:1337/api/events failed, reason: connect ECONNREFUSED ::1:1337

Why is strapi refusing connection? How to fix?

config/index.js

export const API_URL =
    process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'

pages/index.js

...

export async function getStaticProps() {
        const res = await fetch(`${API_URL}/api/events`)
        const events = await res.json()
    
        return {
            props: { events: events.slice(0, 3) },
            revalidate: 1,
        }
    }

-----UPDATED CODE TO BELOW BUT STILL REFUSING CONNECTION ----

config/index.js export const API_URL = 'http://localhost:1337'

pages/index.js

export async function getStaticProps() {
    const res = await fetch(`${API_URL}/api/events`, {
        headers: {
            Authorization: `bearer thetoken`,
        },
    })
    const events = await res.json()

    return {
        props: { events: events.slice(0, 3) },
        revalidate: 1,
    }
}

----BELOW IS SCREENSHOT OF ERROR AND THE 2 CONSOLES SHOWING THE CLIENT (NEXT.JS) AND SERVER (STRAPI) ARE BOTH RUNNING----

Answer 1

I was having the same problem until I found out that the problem was my node version being higher than v16

Answer 2

In your fetch, You need to pass a bearer authorization token from Strapi. You will find your token in Strapi Admin > Settings > API tokens > Create new API token and now copy that new token and use it inside your fetch call. e.g. your token is XYZ123. Use it like this:

const res = await fetch(`${API_URL}/api/events`, { headers: { Authorization: `bearer XYZ123` } } )