title: docker-compose: can't access Django container from within Nuxt container
body: <p>Both my backend (localhost:8000) and frontend (locahost:5000) containers spin up and are accessible through the browser, but I can't access the backend container from the frontend container.</p>
  <p>From within frontend:</p>
  <pre><code>/usr/src/nuxt-app # curl http://localhost:8000 -v
  *   Trying 127.0.0.1:8000...
  * TCP_NODELAY set
  * connect to 127.0.0.1 port 8000 failed: Connection refused
  *   Trying ::1:8000...
  * TCP_NODELAY set
  * Immediate connect fail for ::1: Address not available
  *   Trying ::1:8000...
  * TCP_NODELAY set
  * Immediate connect fail for ::1: Address not available
  * Failed to connect to localhost port 8000: Connection refused
  * Closing connection 0
  curl: (7) Failed to connect to localhost port 8000: Connection refused
  </code></pre>
  <p>My nuxt app (frontend) is using axios to call <code>http://localhost:8000/preview/api/qc/</code>. When the frontend starts up, I can see axios catching <code>errorError: connect ECONNREFUSED 127.0.0.1:8000</code>. In the console it says <code>[HMR] connected</code> though.</p>
  <p>If I make a change to <code>index.vue</code>, the frontend reloads <em>and then</em> in the console it displays:</p>
  <p><code>access to XMLHttpRequest at 'http://localhost:8000/preview/api/qc/' from origin 'http://localhost:5000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response. VM11:1 GET http://localhost:8000/preview/api/qc/ net::ERR_FAILED</code></p>
  <p>I have already setup <code>django-cors-headers</code> (included it in <code>INSTALLED_APPS</code>, and set <code>ALLOWED_HOSTS = ['*']</code> and <code>CORS_ALLOW_ALL_ORIGINS = True</code>).</p>
  <p>In my <code>nuxt.config.js</code> I have set</p>
  <pre><code>axios: {
    headers : {
      &quot;Access-Control-Allow-Origin&quot;: [&quot;*&quot;],
    }
  },
  </code></pre>
  <p>I'm stuck as to what is going wrong. I think it's likely my <code>docker-compose</code> or <code>Dockerfile</code>.</p>
  <p><strong>docker-compose.yml</strong></p>
  <pre><code>backend:
      build: ./backend
      volumes:
          - ./backend:/srv/app
      ports:
          - &quot;8000:8000&quot;
      command: python manage.py runserver 0.0.0.0:8000
      depends_on:
          - db
      networks:
          - main
  
  frontend:
      build:
          context: ./frontend
      volumes:
          - ./frontend:/usr/src/nuxt-app
          - /usr/src/nuxt-app/node_modules
      command: &gt;
          sh -c &quot;yarn build &amp;&amp; yarn dev&quot;
      ports:
          - &quot;5000:5000&quot;
      depends_on:
          - backend
      networks:
          - main
  
  networks:
      main:
          driver: bridge
  </code></pre>
  <p><strong>Dockerfile</strong></p>
  <pre><code>FROM node:15.14.0-alpine3.10
  
  WORKDIR /usr/src/nuxt-app
  
  RUN apk update &amp;&amp; apk upgrade
  
  RUN npm install -g npm@latest
  
  COPY package*.json ./
  RUN npm install
  
  EXPOSE 5000
  
  ENV NUXT_HOST=0.0.0.0
  ENV NUXT_PORT=5000
  </code></pre>
  <p>What am I missing?</p>