[SOLVED] Vue.js Web App axios running from client side and not backend

Issue

I am new in this interesting world of programming, so sorry if my question is so newbi.

I have a Vue.js application running in a linux red hat server on a apache instaled by a xampp, in the same server is living my asp.net-core 6 web api application listening on http://localhost:5256 and https://localhost:7296 and mysql db.

The problem that is presenting my web app is that when i consume my web app as client from a different server, the axios seems to search the web api on my own laptop and not in the localhost backend linux server, even if I put the IP of the linux server in the vue.js project, my laptop dont have access to that server, only to the vue.js application.

Could some one help me to see whats happening, this is my axios code in my vue.js project:

   sendDataToAPI(date, id) {
        const url = 'http://localhost:5256/api/job';
        axios({
            method: 'get',
            url: url,
            params: {
                date: date,
                id: id
            }
            })
        .then(response => {
        // Process the API response
        this.jobs = response.data;
        //console.log(response.data);
        })
        .catch(error => {
        // Handle any errors
        console.error('Error:', error.message);
        });
    }

Also, the variable "this.jobs" is used to build a table in the same vue.js proyect, but when my vue project launch this method, the axios sends the get petition from my client side, my computer, phone, tablet, etc. And I want that axios consume the web api from the localhost of the linux. All the methods runs in the same mywebapp.vue, do I have to split the methods in a separated modules.js? Also the web api responds me in the ports whitout any problem with curl in the same linux server and servers that have access to the ip address.

Could some one please explain me whats happening? or if I am doing something wrong?

I am expecting that my axios request is made to the backend of my linux server, and not in the client side.

Solution

When you use 'http://localhost:5256/api/job' as the URL, Axios will try to send the request to the localhost of the device that's running the JS Module. In your case, since you're accessing your app from a different device that has loaded the JS Modules from your XAMPP app, it's trying to connect to the web API on that device itself. The relative path (localhost) would be the machine that is using the JS Module that contains Axios. In this case, it is your browser

To solve this issue, you should replace 'http://localhost:5256/api/job' with the IP address or hostname of your Linux server where the ASP.NET Core API is hosted.

PS: To illustrate in steps what happens:

1. You are calling your websites frontend app
2. It gives you a response with all the js dependencies, css styles, static files, and so on.
3. You have it now locally also the code part that is containing your axios call. Is running in your browser.
4. You are calling the relative Path "localhost" so you calling from your browser your local client machine and not the server machine.

That's why it works when you are on the server since localhost on the server is also your backend. But localhost from your clients machine does not know nothing about the backend of the server.

Answered By - pwoltschk

Answer Checked By - Marie Seifert (WPSolving Admin)