WSL2, Cannot reach localhost nodejs server on windows browser

Question

i have windows 10 wiht subsystem Linux (Ubuntu-20.04) and I am using WSL2. When I init frontend project (vue project) and I run npm run serve then everything works fine. The application ran on localhost:8080 as i expect. But when i created backend for this app (new project with nodejs, express) I started simple server and in terminal looks fine but when i wanted to go in browser to localhost:5000 to see basic Hello World, the page is loading for a while and then says the webpage localhost didnt send any data.

Here is my app.ts

import express, { Application, Request, Response, NextFunction } from 'express'
import bodyParser from 'body-parser'
import cors from 'cors'
import 'reflect-metadata'

const app: Application = express()
const port = 5000

app.use(cors)
app.use(bodyParser.json({ limit: '20480kb' }))

app.get('/', (req, res) => {
    res.send('Hello!')
})

const server = app.listen(port, 'localhost', () => console.log(`The server is running on port ${port}.`))

Here is my package.json scripts (compile typescript to javascript works fine):

"scripts": {
    "start": "nodemon dist/app.js",
    "build": "rm -rf dist/ && tsc -w",
    "commit": "npx git-cz"
  }

Here is my backend terminal, everything here works fine:

https://i.stack.imgur.com/pJIb9.png

I tried to use netstat to see connection:

https://i.stack.imgur.com/n5naM.png

My problem is that i cant reach the server on web browser, please help.

If you try to open http://localhost:5000/ whats the error? I think i can help you. — Luis Paulo Pinto, Aug 20 '20 at 23:10
Does it work with 127.0.0.1 explicitly instead of localhost? — eirirlar, Sep 27 '20 at 14:52

lsarteaga · Answer 1 · 2021-01-20T00:06:58.403

if you define explicitly the PORT works, i have the same problem trying to run a basic node - express app on WSL2. basically is a network problem so defining the PORT and HOST solve the issue for me. Here is the code.

const express = require('express');
const app = express();
const PORT = 3000;
const HOST = '0.0.0.0';

app.get('/', (req, res) => res.send('hello world'));
app.listen(PORT, HOST, () => console.log('server running'));

doing that when i put localhost:3000 on my browser it works.

For some reason, when i updated docker desktop this method failed. Another valid solution is open the port in windows. in powershell with admin privileges:

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=192.168.x.x

in 'connectaddress' you must put your IP (wsl2) you can obtain this with ifconfig

NotTheDr01ds · Answer 2 · 2020-08-16T21:19:15.007

My first thought was that you were running into a problem with the NAT'd WSL2 interface (as opposed to WSL1, which was bridged by default), but that doesn't quite fit your problem since:

You seem to get a connection, but no data. If it wasn't connecting in the first place, you would just get "Connection Refused" from the browser.
localhost shouldn't have any issues with the NAT anyway.

I'm not an expert in Express, but I think what you are seeing may have to do with your middleware usage here. I believe that for body-parser to work, you probably need to be parsing a POST, but your code (and the browser access) only provides a GET method. See this question/answer for more details.

I think you'll need to provide a POST method, and you'll need to test using something like Postman or curl.

If you just need to rule out any WSL2 problems, try the Express "Hello, World".

score 0 · Answer 3 · answered Jan 09 '21 at 20:52

Dont you need to create an Input Rule on the Windows side and open that port? Go into Security Advanced Settings and create an Input Rule where you allow port 5000 to go through. I am using Windows 10 and WSl2, and using NodeJS and Express -- and thats what I am doing and it works.

WSL2, Cannot reach localhost nodejs server on windows browser

3 Answers3