Search code examples
typescriptfrontendsveltesveltekitweb-frontend

Sveltekit +page.server.ts cannot reach backend on same machine


I have a backend server in GO running on localhost:8081 exposing a couple of endpoints. These endpoints are nicely reachable with requests via CURL, Postman, ...

I am trying to build a SvelteKit frontend application running on dev default port localhost:5137. In the +page.server.ts file I have a load function trying to contact one of the endpoints on localhost:8081, but it does not work. I only ever get this error:

TypeError: fetch failed
    ...
  cause: Error: connect ECONNREFUSED 127.0.0.1:8081
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1161:16) {
    errno: -4078,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '127.0.0.1',
    port: 8081
  }

The contents of my +page.server.svelte - load function looks like this:

export async function load({fetch}) {
    const res = await fetch('http://localhost:8081/api/...');
    return await res.json();
}

Even checked and added the missing origin headers inside the hooks.server.svelte file:

export const handleFetch: HandleFetch = async({request, fetch, event}) => {
    request.headers.set('Origin', event.url.origin);
    return fetch(request)
};

But I cannot seem to get rid of this error. Other endpoints from external public apis work nicely and I can retrieve data from them.

If anyone has any ideas, those would be greatly appreciated. I am all googled out...


Here is the list of used dependencies:

  • NPM v9.6.4

  • node v16.13.0

  • "@sveltejs/adapter-auto": "^2.0.0",

  • "@sveltejs/kit": "^1.5.0",

  • "@typescript-eslint/eslint-plugin": "^5.45.0",

  • "@typescript-eslint/parser": "^5.45.0",

  • "eslint": "^8.28.0",

  • "eslint-config-prettier": "^8.5.0",

  • "eslint-plugin-svelte3": "^4.0.0",

  • "prettier": "^2.8.0",

  • "prettier-plugin-svelte": "^2.8.1",

  • "svelte": "^3.54.0",

  • "svelte-check": "^3.0.1",

  • "tslib": "^2.4.1",

  • "typescript": "^4.9.3",

  • "vite": "^4.0.0",

  • "vitest": "^0.25.3"

I was expecting the endpoint to be reachable like any other external public API and return the expected data so I also:

  • checked various CORS settings
  • added missing headers

Solution

  • I finally managed to get it to work, with @carloV2 pointing me in the right direction.

    I still don't understand what the problem was, but the solution was updating node to the latest version and re-installing the node_modules. After that everything worked as expected.