CODEWITHSUNDEEP
node.jsnext.jsstrapi
preston
preston

Reputation: 4367

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

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----

enter image description here

Upvotes: 24

Views: 15729

Answers (6)

Ehmad Saeed
Ehmad Saeed

Reputation: 109

I was facing the same issue and I noticed a few things and corrected it.

  1. It happened after I updated my node version from v16 to v18.
  2. The displayed error showed my address as ::1:1337 instead of the API URL.
  3. localhost does not work anymore with my next.js project.

So, I made two changes to my API URL in the env file and it worked for me.

  1. Change localhost to 127.0.0.1.
  2. Wrap the API URL with quotes, so it would treat it as a string. "127.0.0.1".

Upvotes: 5

Serega
Serega

Reputation: 21

.env bad localhost:1337 127.0.0.1:1337

Upvotes: 2

Gulshan Prajapati
Gulshan Prajapati

Reputation: 1003

Specifying 127.0.0.1:1337 instead of localhost has solved the issue

Upvotes: 22

Jordy
Jordy

Reputation: 111

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

Upvotes: 11

preston
preston

Reputation: 4367

// export const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://0.0.0.0:1337'
// COMMENTED OUT LINE ABOVE WORKS TOO JUST LIKE THE UNCOMMENTED CODE BELOW
export const API_URL =
    process.env.NEXT_PUBLIC_API_URL || 'http://127.0.0.1:1337'

// BELOW IS NOT WORKING FOR SOME ODD REASON
// export const API_URL = 'http://localhost:1337'

Upvotes: 54

Simran Singh
Simran Singh

Reputation: 2899

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` } } )

Upvotes: 2

Related Questions