Odd behavior with axios, nuxt, and docker - vue.js

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!

Answer 1

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'
},