Cannot access vue-cli using phone on local wifi network

[nigel-dewar]

Version

3.12.0

Reproduction link

https://github.com/Armour/vue-typescript-admin-template/tree/minimal

Environment info

System:
    OS: Windows 10
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz  
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE       
    Yarn: 1.12.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.387.0
  npmPackages:
    @tinymce/tinymce-vue:  3.0.1 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.11.0 
    @vue/babel-preset-jsx:  1.1.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  3.11.0
    @vue/cli-plugin-babel: ^3.11.0 => 3.11.0
    @vue/cli-plugin-e2e-cypress: ^3.11.0 => 3.11.0
    @vue/cli-plugin-eslint: ^3.11.0 => 3.11.0
    @vue/cli-plugin-pwa: ^3.11.0 => 3.11.0
    @vue/cli-plugin-typescript: ^3.11.0 => 3.11.0
    @vue/cli-plugin-unit-jest: ^3.11.0 => 3.11.0
    vue-class-component: ^7.1.0 => 7.1.0
    vue-cli-plugin-element: ^1.0.1 => 1.0.1
    vue-cli-plugin-style-resources-loader: ^0.1.3 => 0.1.3
    vue-count-to:  1.0.13
    vue-eslint-parser:  5.0.0 (2.0.3)
    vue-hot-reload-api:  2.3.3
    vue-i18n:  8.14.0
    vue-image-crop-upload:  2.5.0
    vue-jest:  3.0.4
    vue-loader:  15.7.1
    vue-property-decorator: ^8.2.2 => 8.2.2
    vue-router: ^3.1.2 => 3.1.2
    vue-splitpane:  1.0.4
    vue-style-loader:  4.1.2
    vue-svgicon: ^3.2.6 => 3.2.6
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
    vue2-dropzone:  3.6.0
    vuedraggable:  2.23.0
    vuex: ^3.1.1 => 3.1.1
    vuex-class: ^0.3.2 => 0.3.2
    vuex-module-decorators: ^0.10.1 => 0.10.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Open up port 8080 in Windows Firewall. Run yarn serve
You will be able to run fine on local machine
Try to connect to the provided IP address and port on your phone ie. http://192.168.0.5:8080

What is expected?

Should be able to see your vue website on your phone

What is actually happening?

Get denied. Wont show on phone

---

Have tried settings things in vue.config.js like this

devServer: {
host: '0.0.0.0',//your ip address
port: 8080,
...
}

but doesnt work.

[DanielStout5]

I'm running into this exact issue.

• Running vue-cli-service serve prints two URLs, both of which I can view from the computer I'm running it on

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.0.107:8081/

• Trying to view the "Network" URL will not load on any other devices on this same network - it will spin indefinitely and time out without making a connection.
• I tried adding an exception for port 8081 in the Windows Firewall and even disabling the Firewall entirely, and it doesn't work
• I have other local web servers running on other ports on this machine and I'm able to connect to them just fine
• I've tried specifying devServer.public in vue.config.js as 192.168.0.107:8081, 192.168.0.107, 0.0.0.0:8081, 0.0.0.0
• I've tried a number of combinations of settings under devServer, e.g. port, host, public, disableHostCheck,
• I've tried this entire process with a number of different ports (8080, 8081, 48175, 53123, etc) with all the same results - works on this machine, but not from other devices

I found a workaround:

Run a command prompt as administrator and run this command: netsh interface portproxy add v4tov4 listenport=8082 connectaddress=127.0.0.1 connectport=8081

That will let you connect to :8082 to view what is locally visible on 8081 (after you add 8082 to allowed inbound connections in Windows Firewall). I'm still not clear on why this is necessary - and it also only seemed to work if I ran the command while the web server was already running, though that might have been a coincidence..

[eddyoliveiram]

I'm running into this exact issue.

* Running `vue-cli-service serve` prints two URLs, both of which I can view from the computer I'm running it on

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.0.107:8081/

* Trying to view the "Network" URL will not load on any other devices on this same network - it will spin indefinitely and time out without making a connection.

* I tried adding an exception for port 8081 in the Windows Firewall and even disabling the Firewall entirely, and it doesn't work

* I have other local web servers running on other ports on this machine and I'm able to connect to them just fine

* I've tried specifying `devServer.public` in `vue.config.js` as `192.168.0.107:8081`, `192.168.0.107`, `0.0.0.0:8081`, `0.0.0.0`

* I've tried a number of combinations of settings under devServer, e.g. `port`, `host`, `public`, `disableHostCheck`,

* I've tried this entire process with a number of different ports (8080, 8081, 48175, 53123, etc) with all the same results - works on this machine, but not from other devices

I found a workaround:

Run a command prompt as administrator and run this command: netsh interface portproxy add v4tov4 listenport=8082 connectaddress=127.0.0.1 connectport=8081

That will let you connect to :8082 to view what is locally visible on 8081 (after you add 8082 to allowed inbound connections in Windows Firewall). I'm still not clear on why this is necessary - and it also only seemed to work if I ran the command while the web server was already running, though that might have been a coincidence..

That worked for me as well. Thank you. My issue was that my app was in my WSL2 and I was running it with ubuntu terminal. Which has a different IP from windows, so in order to make it work either I change my app to an windows folder and run in windows terminal or I do this workaround you provided.