Error: connect ECONNREFUSED ::1:8000 in Nuxt 3
I’m working on a Nuxt 3 project and encountering the following error:
[nitro] [unhandledRejection] connect ECONNREFUSED ::1:8000
This error occurs when I try to make API requests to my backend during development. I suspect it’s related to the frontend (Nuxt 3) server not running or being misconfigured, but I’m not sure how to resolve it.
It happen when I try to get tokens from the backend when the app start. So I try to call the backend in middleware/auth.global.ts and in plugin/initail.ts like this to make sure that user token is set to the state (I am using Pinia for state management)
import useAuthStore from "~/store/useAuthStore";
export default defineNuxtRouteMiddleware(async () => {
const authStore = useAuthStore();
if (!authStore.isAuthenticated) {
// Call the backend here
await authStore.checkAuthState();
}
});
import useAuthStore from "~/store/useAuthStore";
export default defineNuxtPlugin(async (nuxtApp) => {
const authStore = useAuthStore();
authStore.checkAuthState();
});
My checkAuthState() is like this :
try {
// Attempt to refresh the token if access is empty
const axiosApi = axios.create({
baseURL: "http://localhost:8000/api",
headers: {
"Content-Type": "application/json",
'Accept': 'application/json',
},
withCredentials: true,
withXSRFToken: true,
timeout: 10000,
});
await await axiosApi.post('/token/refresh/');
} catch (error) {
console.error("Error refreshing token:", error);
this.authenticated = false;
return;
}
Here’s some additional information about my setup:
Frontend: Nuxt 3 with Axios. Backend: Django (or specify your backend) running locally on port 8000. I’m using http://localhost:8000 as the base URL for API requests.
Thanks in advance for your help!
Things I’ve already tried:
Verified that the backend is running and accessible via http://localhost:8000 in my browser. Updated the Axios base URL to use http://localhost:8000. Does anyone know what might be causing this issue or how I can fix it?