VueJS front can't access FastAPI/Flask REST API on same server (development)

Hi all

Since beginning of december I started my journey learning VueJS. Having lot of fun while learning a ton. I managed to find a lot of answers on the forums along my way but this one I can’t seem to figure out myself.

The structures of my projects generally are the same:

a) VueJS front end
b) Flask/FastAPI (rest) API serving data

I serve both (front & backend) from one and the same machine. When accessing my API directly or through the VueJS app on my desktop (from which I run both), the behaviour works as intended. I input stuff in the VueJS app, it sends it to my backend and returns whatever I need.

I’ve noticed however that during development I’m unable to actually get my app to run similarly on my mobile devices within the same network. So I’m able to access my app and do what I want except to use the functions that rely on the Flask/FastAPI backend via my API.

I was wondering if this is intended behaviour and if not how to circumvent this issue? I might add that CORS is not the issue as I can directly access the ‘raw’ endpoints via my mobile devices without a problem.

I’m sure this is something obvious but I am relativelly new to all this so I must be overlooking something important.

Many thanks in advance!

Hi. You could use Google chrome console to remotely check the console of your mobile browser. This may give you some clues

See here for example