CODEWITHSUNDEEP
flaskaxiosbootstrap-vue
schg
schg

Reputation: 1

Cannot reach the localhost of the server when using ssh port forwarding

I am using Flask and Vue to develop a single page app. So far I have been developing and running both Flask and Vue locally on my laptop. I have now moved both to a server and want to run them there long term. For now, I have kept the original "localhost:5000" setting. Both Flask and Vue work and the axios-requests from Vue arrive at the Flask app. However, to make the latter work not only on the server environment but also from my client laptop, I used ssh port forwarding. The actual problem now is: My website is displayed to me in my local browser and i can click-around, but the axios-requests don't work. This is because the requests are trying to reach the localhost of my laptop, but not the server's localhost (when I start my local Flask app, the requests work). I'm sure I'm just missing something important here - I don't have much experience with client-server architectures.

One of my Requests in Vue.js:

methods: {
    getProjects() {
      const path = 'http://localhost:5000/projects';
      axios.get(path)
        .then((res) => {
          this.projects = res.data;
          this.rows = this.projects.length;
          this.setColumns();
        })
        .catch((error) => {
          console.error(error);
        });
    },
...

The Flask app (server-side) is running on:

http://0.0.0.0:5000/

My ssh port forwarding:

ssh -o GatewayPorts=true -L 8081:0.0.0.0:8080 me_the_user@the_server

Any suggestions welcomed.

Upvotes: 0

Views: 267

Answers (1)

schg
schg

Reputation: 1

Ok, I got it working now. The problem was simply that I only forwarded the frontend/Vue port (8080:0.0.0.0:8080), but not the backend/Flask port (5000:0.0.0.0:5000).

Upvotes: 0

Related Questions