title: Odd behavior with axios, nuxt, and docker
body: <p>I am setting up a full-stack application with nuxt js running my client-side code, express js running my api, and mysql as my database. To run all of these processes I have been using docker, more specifically docker-compose. After much configuration, I have gotten all three images to run together. There is one problem though, I cannot figure out how to make calls to my api with nuxt/axios.</p>
  
  <p>I have tried many different tactics. My express api is available to the "outside-world" at <code>http://localhost:8080</code>, so I set up my axios <code>baseURL</code> to reflect that. I ran some test axios gets in some nuxt js middleware, and kept getting a connection refusal error. I finally figured out that I could use docker-compose networks to connect my frontend and backend, so I remapped my axios <code>baseURL</code> to <code>http://api:8080</code> (api is the name of my docker-compose image), and in the axios request in the nuxt js middleware, it worked like a charm. Later, I was writing some code, and I wanted to send an axios request in a vue method. Even though the axios requests in the middleware were working with this <code>baseURL</code>, this new axios request in the method gave the error</p>
  
  <blockquote>
    <p>commons.app.js:434 OPTIONS <a href="http://api:8080/api/v1/get/colors" rel="nofollow noreferrer">http://api:8080/api/v1/get/colors</a> net::ERR_NAME_NOT_RESOLVED</p>
  </blockquote>
  
  <p>I tried changing my axios baseURL back to localhost, and now the axios request in the methods works, but the axios request in the middleware doesn't work.</p>
  
  <p>docker-compose.yml</p>
  
  <pre><code>version: "3.3"
  
  services:
    mysql:
      container_name: mysql
      image: mysql:5.7
      environment:
        MYSQL_USER: ${MYSQL_DEV_USER}
        MYSQL_PASSWORD: ${MYSQL_DEV_PASSWORD}
        MYSQL_DATABASE: ${MYSQL_DEV_DATABASE}
        MYSQL_ROOT_PASSWORD: ${MYSQL_DEV_ROOT_PASSWORD}
      ports:
        - 3306:3306
      restart: always
      volumes:
        - mysql_data:/var/lib/mysql
        - ./database/create_db.sql:/docker-entrypoint-initdb.d/create_db.sql
        - ./database/insert_db.sql:/docker-entrypoint-initdb.d/insert_db.sql
  
    api:
      container_name: api
      depends_on:
        - mysql
      links:
        - mysql
      build:
        context: ./backend
        dockerfile: Dockerfile-dev
      environment:
        NODE_ENV: development
        MYSQL_USER: ${MYSQL_DEV_USER}
        MYSQL_PASSWORD: ${MYSQL_DEV_PASSWORD}
        MYSQL_DATABASE: ${MYSQL_DEV_DATABASE}
        MYSQL_HOST_IP: mysql
        PORT: ${API_PORT}
        HOST: ${API_HOST}
      expose:
        - 8080
      ports:
        - 8080:8080
      volumes:
        - ./backend:/app
      command: npm run dev
  
    frontend:
      container_name: frontend
      depends_on:
        - api
      links:
        - api
      build:
        context: ./frontend
        dockerfile: Dockerfile-dev
      environment:
        NUXT_PORT: 3000
        NUXT_HOST: 0.0.0.0
        NODE_ENV: development
        GOOGLE_CLIENT_ID: ${GOOGLE_CLIENT_ID}
        API_HOST: api
        API_PORT: ${API_PORT}
        API_PREFIX: ${API_PREFIX}
      expose:
        - 3000
      ports:
        - 3000:3000
      volumes:
        - ./frontend:/app
      command: npm run dev
  
  volumes:
    mysql_data:
  </code></pre>
  
  <p>nuxt.config.js</p>
  
  <pre class="lang-js prettyprint-override"><code>axios: {
      baseURL: 'http://api:8080/api/v1'
    },
  </code></pre>
  
  <p>nuxt middleware</p>
  
  <pre class="lang-js prettyprint-override"><code>export default async function({ app, redirect, error }) {
    try {
      const response = await app.$axios.$get('/auth/login')
      if (!response.success) {
        throw new Error(response.message)
      }
      redirect('/admin')
    } catch (err) {
      console.log(err)
      await app.$auth.logout()
      error({ message: err.message, statusCode: 500 })
    }
  }
  </code></pre>
  
  <p>nuxt method</p>
  
  <pre class="lang-js prettyprint-override"><code>methods: {
      async test() {
        const colors = await this.$nuxt.$axios.$get('/get/colors')
        console.log(colors)
      }
  }
  </code></pre>
  
  <p>Thank you all so much!</p>
  
  <p>P.S. This is my first stack overflow question!</p>