API problems after build project

Hello,
We had a problem after building our Vuejs application.

We did not any problem with the API service. We can connect with Postman and we can do any transactions.

The project will run on the apache. After the build, we move the files in dist to /var/www/htdocs

We cannot send any requests to the API service. (Client-side). If I wrote localhost or 127.0.0.1, API services don’t work on the client-side. The users can’t log in, can not perform any transactions. Even though both sides working on the same device If I wrote server IP address the axios.default.baseURL.

I think the client computers can not finding/reaching localhost or 127.0.0.1 addresses on their computer.

This project running on the intranet. Maybe there will be no internet connection on this server. I think we should be able to write localhost or 127.0.0.1 on the axios.default.baseURL

We will manually enter the server IP address for the project we are doing, but what should we do to avoid this problem in the future?

Thanks for helping.

What console or network errors are you getting? It sounds like you’re having CORS issues which is why it works with Postman, but not through the browser. However, we’d have to see the error messages you’re getting in order to confirm that.

Hello James,

If I wrote 127.0.0.1 or localhost to axios URL

<template>
 <div>
  <h1>{{ test }}</h1>
 </div>
</template>
<script>
    import axios from 'axios'
    export default {
    data(){
      return{
        test: 'Original Value'
     }
    },
    mounted(){
       axios.post('http://localhost:8000/register/test/')
       .then(response => (this.test = response.data.response))
       .catch(error => console.log(error))
    }
  }
</script>

When we save and build this way, we get an error. Error is;

localhost:8000/register/test/:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

I think the user computers can not finding/reaching localhost or 127.0.0.1 addresses on their computer.

If I wrote server IP address to axios URL

<template>
 <div>
  <h1>{{ test }}</h1>
 </div>
</template>
<script>
    import axios from 'axios'
    export default {
    data(){
      return{
        test: 'Original Value'
     }
    },
    mounted(){
       axios.post('http://10.1.1.100:8000/register/test/')
       .then(response => (this.test = response.data.response))
       .catch(error => console.log(error))
    }
  }
</script>

When we save and build this way, API is working and successful response.

Our backend and vuejs project working on the same server. The server IP address is 10.1.1.100.

As I say before, I think we should be able to write localhost or 127.0.0.1 on the axios, because this project running on the intranet. Maybe there is no internet connection on this server. We don’t want to enter the IP address manually.

That will only work if your server is on the same machine, but by the sound of it, it isn’t.

as you said

Our backend and vuejs project working on the same server. The server IP address is 10.1.1.100.

vuejs project , you meant the http server, right?

so the vuejs got rendered to the browser where the computer is running, which is no longer in the same pc, this code is run from browser pc not 10.1.1.100:

   mounted(){
       axios.post('http://localhost:8000/register/test/')
       .then(response => (this.test = response.data.response))
       .catch(error => console.log(error))
    }

localhost here is the client pc (10.1.1.x), not the pc(10.1.1.100) where vuejs is located, actually your other code is correct:

  mounted(){
       axios.post('http://10.1.1.100:8000/register/test/')
       .then(response => (this.test = response.data.response))
       .catch(error => console.log(error))
    }