ECONNREFUSED when fetching from localhost:3000 to localhost:8000 (Nextjs - DjangoApp)

Question

When trying to make a 'POST' request using the 'fetch' node function, between the frontend and the backend (React Next.js and Django), I got an 'ECONNREFUSED' error.

Backend requests using Postman worked as expected.

Django is on port: 8000 and Next.js is on port: 3000.

It was working until I installed the XCode, Ionic and Capacitor packages (I don't really know if they are the reason I'm getting this error).

Here is the error:

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11118:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///(api)/./src/pages/api/account/login.js:18:28)
    at async Object.apiResolver (/Users/tomas.leblanc/Dev/HermesApp/frontend/node_modules/next/dist/server/api-utils/node.js:185:9)
    at async DevServer.runApi (/Users/tomas.leblanc/Dev/HermesApp/frontend/node_modules/next/dist/server/next-server.js:395:9)
    at async Object.fn (/Users/tomas.leblanc/Dev/HermesApp/frontend/node_modules/next/dist/server/base-server.js:496:37)
    at async Router.execute (/Users/tomas.leblanc/Dev/HermesApp/frontend/node_modules/next/dist/server/router.js:226:36)
    at async DevServer.run (/Users/tomas.leblanc/Dev/HermesApp/frontend/node_modules/next/dist/server/base-server.js:606:29)
    at async DevServer.run (/Users/tomas.leblanc/Dev/HermesApp/frontend/node_modules/next/dist/server/dev/next-dev-server.js:450:20)
    at async DevServer.handleRequest (/Users/tomas.leblanc/Dev/HermesApp/frontend/node_modules/next/dist/server/base-server.js:321:20) {
  cause: Error: connect ECONNREFUSED ::1:8000
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 8000
  }
}

Would be nice if someone could help me dealing with this error!

If you need more details or project files, please fill free to ask :D

EDIT1:

If I start the front app, and try to execute the fetch function, it will show the above arrero, but first is gonna show this:

(node:10488) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)

Shouldn't be the reason though.

EDIT2:

I did downgrade Node.js version from 'v18.11.0' to 'v16.17.1' and now is working!!

Yes! Server running and receiving manual requests from Postman — Tomas Le Blanc, Oct 16 '22 at 22:48

christofvanhove · Answer 1 · 2022-12-28T21:49:05.887

I seems I'm facing the same issue, and it looks related to IP6. I can see you're using IP6 in your stacktrace: address: '::1'

Apparently there is a issue with IP6 in nodejs above version 16. I think triggered by this change: https://www.reddit.com/r/ipv6/comments/qbr8jc/nodejs_finally_prefers_ipv6_addresses_over_ipv4/

You can bypass this in following ways:

use an hardcoded ip4 adress like 127.0.0.1
disable ip6 support in linux: see https://www.techrepublic.com/article/how-to-disable-ipv6-on-linux
configure node to use IP4 adresses first. See ECONNREFUSED when making a request to localhost using fetch in Node.js

import dns from 'node:dns';
dns.setDefaultResultOrder('ipv4first');

If somebody can tell why IP6 does not (always?) works in the latest versions of nodejs. I would be glad to hear it.

score 3 · Answer 2 · edited Oct 18 '22 at 19:55

3

Downgrading Node.js from v18 to v16 resolved the issue.

edited Oct 18 '22 at 19:55

blackgreen

34,072
23
111
129

answered Oct 17 '22 at 10:38

Tomas Le Blanc

121
1
5

ECONNREFUSED when fetching from localhost:3000 to localhost:8000 (Nextjs - DjangoApp)

2 Answers2