'Network Error' When Accessinging Wasp App From Mobile Device

Hi all! I've made some exciting progress on a Wasp app I have been building, and I want to test it out on my physical iPhone connected to the same WiFi network as my desktop that is running my dev server. I am not a networking guru, so I apologize if the following question is silly:

What is not working: When I navigate to my app login page via my desktop's private IP on my phone, (192.168.1.17:3000/login), I am presented with the Wasp login page, per usual. But when I attempt to actually login with a valid account, I get a 'Network Error' toast

What I have done:
1 - Followed the Wasp docs (https://wasp.sh/docs/advanced/middleware-config) section 1 to create

src/serverSetup.ts

src/serverSetup.ts

src/serverSetup.ts

src/serverSetup.ts:

import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '192.168.1.17:3000'] }))
  return middlewareConfig
}

import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '192.168.1.17:3000'] }))
  return middlewareConfig
}

import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '192.168.1.17:3000'] }))
  return middlewareConfig
}

import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '192.168.1.17:3000'] }))
  return middlewareConfig
}

For kicks, I have also tried

http://192.168.1.17:3000

http://192.168.1.17:3000

http://192.168.1.17:3000

http://192.168.1.17:3000 and

https://192.168.1.17:3000

https://192.168.1.17:3000

https://192.168.1.17:3000

https://192.168.1.17:3000

2 - Via Windows Powershell admin, ran the following two commands to port forward to WSL running the Wasp dev server:

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.19.112.174

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.19.112.174

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.19.112.174

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.19.112.174

and

netsh interface portproxy add v4tov4 listenport=3001 listenaddress=0.0.0.0 connectport=3001 connectaddress=172.19.112.174

netsh interface portproxy add v4tov4 listenport=3001 listenaddress=0.0.0.0 connectport=3001 connectaddress=172.19.112.174

netsh interface portproxy add v4tov4 listenport=3001 listenaddress=0.0.0.0 connectport=3001 connectaddress=172.19.112.174

netsh interface portproxy add v4tov4 listenport=3001 listenaddress=0.0.0.0 connectport=3001 connectaddress=172.19.112.174

where

172.19.112.174

172.19.112.174

172.19.112.174

172.19.112.174 is my WSL IP

3 - Via Windows Defender Firewall, created a rule to allow inbound TCP traffic for local ports 3000 and 3001 on private networks (Which is what my home network is defined as in Windows network settings)

4 - Stopped and restarted my Wasp dev server several times & ran

wasp clean

wasp clean

wasp clean

wasp clean

5 - Restarted my computer (Confirmed that my WSL private IP did not change and my port forwarding rules persisted)

Any help appreciated, thanks!

Configuring Middleware | Wasp

Wasp comes with a minimal set of useful Express middleware in every application. While this is good for most users, we realize some may wish to add, modify, or remove some of these choices both globally, or on a per-api/path basis.

'Network Error' When Accessinging Wasp App From Mobile Device

Similar Threads

Similar Threads

Similar Threads