title: How to address backend host with axios, when frontend and backend are in virtual docker network
body: <p>I'm building a simple Website with login, and my vue-frontend needs to retrieve user data from my nodejs-backend which connects to a sql database.
  I decided to use docker-compose for this, and as I understand, docker-compose sets up a network automatically for the services that are mentioned in my docker-compose.yml.</p>
  
  <p>What doesn't seem to work, is the way I address the backend in my code.
  I suspect that it might be because of the way I use axios to send a request to my backend.</p>
  
  <p>I have inspected the default docker-network and was able to ping from my frontend to my backend using the dns names I found in the network-configuration.
  But using the same names inside my code didn't work.</p>
  
  <p>What does work, is mapping a host port to my exposed api port and using <a href="http://localhost:5000" rel="noreferrer">http://localhost:5000</a> as address, but this defeats the purpose of a docker network.</p>
  
  <p>my docker-compose.yml:</p>
  
  <pre><code>version: '3.3'
  
  services:
      vue-frontend:
          image: flowmotion/vue-js-frontend
          ports:
              - 8070:80
          depends_on:
              - db-user-api
  
      db-user-api:
          image: flowmotion/user-db-api
          environment:
              - PORT=5000
          ports:
              - 5000:5000 #only needed if docker network connection can't be established 
  </code></pre>
  
  <p>the Vue-fontend files in question:</p>
  
  <p>Login.vue</p>
  
  <pre><code>methods: {
      async login() {
        try {
          const response = await authenticationService.login({
            email: this.email,
            password: this.password
          });
          this.$store.dispatch("setToken", response.data.token);
          this.$store.dispatch("setUser", response.data.user);
          this.$router.push({ path: "/" });
        } catch (error) {
          this.showError = true;
          this.error = error.response.data.error;
        }
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>authenticationService.js</p>
  
  <pre><code>import api from "@/services/api";
  
  export default {
    login(credentials) {
      return api().post("login", credentials);
    }
  };
  </code></pre>
  
  <p>api.js</p>
  
  <pre><code>import axios from 'axios';
  import config from '../config/config';
  export default () =&gt; {
      return axios.create({
          baseURL: config.userBackendServer
      });
  };
  </code></pre>
  
  <p>config.js ()</p>
  
  <pre><code>module.exports = {
      userBackendServer: 'http://cl-dashboard_db-user-api_1:5000' //this doesn't seem to work
  };
  
  //using 'http://localhost:5000' works if ports are mapped to host machine.
  </code></pre>
  
  <p>expected result would be my backend doing a sql lookup.</p>
  
  <p>actuel result is, instead of connecting to my backend my frontend gives me a 404 status and my backend is never reached</p>