Accessing WSL2 Vue.js server (localhost:8080) exposing NATted IP number externally

Question

Some background, just so you know what I am trying to achieve before someone suggests that what I want is not what I want: I am developing a Vue.js 3 service, with a little Python (Flask) backend. Both components run on (Ubuntu) WSL2 and Windows 10. Everything has worked fine referring to http://localhost:8080 (Vue) and http://localhost:5000 (Flask) respectively (URLs work out of the box from my Chrome on Windows without further configuration). My problem is that I could also use exposing 8080 with the IP number on my LAN to test the UI I'm building with my phone (inspiration here). Trying to do this, in turn, lead me here and here).

All good? Not so much, because:

Ubuntu:

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 20.04.4 LTS
Release:        20.04
Codename:       focal

$ ip addr | grep eth0
4: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc mq state UP group default qlen 1000
inet 172.24.76.40/20 brd 172.24.79.255 scope global eth0

The Flask server works (here's Ubuntu, but same thing from the Windows Powershell)

$ curl http://172.24.76.40:5000
<html>
    <head>
        <title>Test file upload</title>
        <style>
body {
   :

But, sort of inexplicably to me:

$ curl http://172.24.76.40:8080
curl: (7) Failed to connect to 172.24.76.40 port 8080: Connection refused

yet:

$ curl http://localhost:8080
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">

Of course http://172.24.76.40:8080 won't be accessible from Chrome on Windows 10 either.

Flask (port 5000) is accessible from Chrome on Windows and even from my Android phone (with the Windows IP of course: http://192.168.1.156:5000 ) on the same Lan (that's after I went into the Windows Firewall to open the port and did this port forwarding in the powershell:

PS C:\WINDOWS\system32> netsh interface portproxy add v4tov4 listenport=5000 listenaddress=0.0.0.0 connectport=5000 connectaddress=172.24.76.40

Dear network wizards, am I going crazy? What am I missing?

Thank you

score 1 · Answer 1 · edited Jun 07 '22 at 01:51

Ok, I found the solution, and believe me, this was a gotcha of major proportion, as the solution was to be found in a rather different place than I had expected.

As I had the backend and the front-end running on the same localhost, CORS had raised its ugly head and given me a hard time. I had addressed that issue with this approach some time back. Little did I know that this was also introducing such a nasty side effect that had gone unnoticed for quite a while (making the server at that IP appear unreachable!). In short, it was not a network issue, albeit it damn sure looked like one!

My solution was to change the vue.config.js file from this:

devServer: {
   proxy: 'http://localhost:5000/',
   host: 'localhost'
},

to this:

devServer: {
  proxy: {
    "/upload": {
      target: "http://localhost:5000"
    }
  }
},

I am sure that React.js developers may find themselves in a similar situation. Now you know where to look at. Same goes for users of other frameworks.

Thank you for your edit NotTheDroids, I was not aware of the rule. Honest. My problem is that I hate it when SO tells me that I cannot do this or that because of reputation. I wasn't trying to do anything funky, — Luca P., Jun 09 '22 at 14:14

Accessing WSL2 Vue.js server (localhost:8080) exposing NATted IP number externally

1 Answers1

Linked