As a newcomer to the world of programming, I apologize if my question sounds basic. I currently have a setup where a Vue.js application is running on a Linux Red Hat server with Apache installed via XAMPP. Additionally, an ASP.NET Core 6 Web API application and MySQL database are also hosted on the same server.
The issue I'm encountering is that when I try to access my web app as a client from a different server, Axios seems to be looking for the Web API on my local machine instead of the localhost backend Linux server. Even if I specify the IP address of the Linux server in the Vue.js project, my laptop only has access to the Vue.js application, not the server. Can anyone help me figure out what's going wrong? Here's the Axios code used 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);
});
}
Additionally, the "this.jobs" variable is used to populate a table within the same Vue.js project. However, when this method is triggered, Axios sends the GET request from the client side (my computer, phone, tablet, etc.) rather than consuming the Web API from the Linux localhost. All methods are running within the same mywebapp.vue file. Should I separate these methods into separate modules.js files? Despite being able to successfully receive responses from the Web API using curl on the Linux server itself and servers with access to the IP address, why is Axios behaving differently?
If anyone can shed some light on what might be going on or if I am missing something crucial, it would be greatly appreciated. My goal is to ensure that Axios requests are directed to the backend of my Linux server, not the client side.