Odd behavior with axios, nuxt, and docker

Question

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.

I have tried many different tactics. My express api is available to the "outside-world" at http://localhost:8080, so I set up my axios baseURL 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 baseURL to http://api:8080 (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 baseURL, this new axios request in the method gave the error

commons.app.js:434 OPTIONS http://api:8080/api/v1/get/colors net::ERR_NAME_NOT_RESOLVED

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.

docker-compose.yml

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:

nuxt.config.js

axios: {
    baseURL: 'http://api:8080/api/v1'
  },

nuxt middleware

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 })
  }
}

nuxt method

methods: {
    async test() {
      const colors = await this.$nuxt.$axios.$get('/get/colors')
      console.log(colors)
    }
}

Thank you all so much!

P.S. This is my first stack overflow question!

I don't know Nuxt very well so help me out a bit... how are you running these "test" requests from the middleware? In what environment are they running? — Phil
@Phil when I go to the route localhost:3000/verify, nuxt js loads a .vue file that automatically runs that piece of middleware. I learned what I know about the middleware from this bit of documentation nuxtjs.org/guide/routing#middleware. Also, thank you for re-formatting my question a bit! If there is anything else I can clarify please let me know. — Stewart Morris

Phil Phil · Accepted Answer · 2019-08-06T04:21:45

Nuxt's Axios module offers two configuration options for URL prefixes, one for server and one for the browser.

axios: {
  baseURL: 'http://api:8080/api/v1',
  browserBaseURL: 'http://localhost/8080/api/v1'
},

Odd behavior with axios, nuxt, and docker

1 Answers