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

Is the server listening on both IPv4 and v6 (either separately or combined on a single-stack -- depends on your OS) or only v4? In the latter case the browser might be 'happy-eyeballing' to v4 but your nextJS not. — dave_thompson_085, Apr 12 '22 at 04:01

score 35 · Accepted Answer · answered Apr 12 '22 at 06:39

35

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

answered Apr 12 '22 at 06:39

preston

3,721
6
46
78

10

Fantastic. Changing "localhost" to "127.0.0.1" did the trick. – Ondiek Elijah Sep 07 '22 at 20:04
wow, thanks! that solved my issue too. and it's weird. chrome browser pointing to localhost:1377... works fine. but form getStaticProps, no! and 127.0.0.1 works. good to know. – Ron Al Oct 18 '22 at 01:04

score 14 · Answer 2 · answered Nov 24 '22 at 07:08

14

Specifying 127.0.0.1:1337 instead of localhost has solved the issue

answered Nov 24 '22 at 07:08

Gulshan Prajapati

584
4
11

score 10 · Answer 3 · answered May 23 '22 at 12:55

10

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

answered May 23 '22 at 12:55

Jordy

101
2

omfg me too ... 3 hours down the drain – paqash Aug 19 '22 at 21:26

score 5 · Answer 4 · answered Mar 25 '23 at 13:22

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

It happened after I updated my node version from v16 to v18.
The displayed error shows my address as ::1:1337 instead of the API URL.
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.

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

score 2 · Answer 5 · answered Apr 12 '22 at 03:26

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

answered Apr 12 '22 at 03:26

Simran Singh

2,323
12
21

This is what I needed for my issue, thanks :) – J_P Jun 11 '23 at 15:07

score 2 · Answer 6 · answered Jan 26 '23 at 06:02

2

.env bad localhost:1337 127.0.0.1:1337

answered Jan 26 '23 at 06:02

Serega

21
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 29 '23 at 20:31

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

6 Answers6

Linked

Related