Docker compose network not resolving hostname in javascript http request-CodePudding

I am currently writing a small fullstack application using Docker compose, vue, and python. All my containers work in isolation, but I can't seem to get my containers to communicate using host names... Here's my code:

Docker Compose

version: "3.8"
services:
  web:
    build: ./TranscriptionFrontend
    ports:
     - 4998:4998
  api:
    build: ./TranscriptionAPI

Javascript Frontend Request

fetch("http://api:4999/transcribe", {
        method:'POST',
        headers: {'Content-Type': 'application/json'}, 
        body: JSON.stringify(data)
      }).then(res => {
        res.json().then((json_obj) =>{
          this.transcription_result = json_obj['whisper-response']
        })
      }).catch(e => {
        this.transcription_result = "Error communicating with api: "   e;
      })

I know my API service works because originally I was just mapping it to a port on my localhost, but that got messy and I want to keep access to it within my docker container. In all cases the host name could not be resolved from my JS request. Also, curl-ing from my containers using host names does provide a response i.e. docker-compose exec web curl api or vice versa. I'm a beginner to java script and docker so apologies if I'm missing something basic.

What I've tried:

XML Http Request
Making call without using http://

CodePudding user response：

Your docker service name won't reflect in the url unless you configure some virtual hosts that points to its image on localhost. You can look into something like How to change the URL from "localhost" to something else, on a local system using wampserver? if that is what you really want to do but I feel it might be defeating the point.

My approach would be to pass the API url as environment variable to your front-end service directly in the Docker compose file. Something like:

services:
  web:
    build: ./TranscriptionFrontend
    ports:
     - 4998:4998
    environment:
      API_URL: http://127.0.0.1:4999
  api:
    build: ./TranscriptionAPI
    ports:
     - 4999:4999

and then inject the env variable into your Javascript app build. For example assuming you're using any Node.js stack for compiling your JS you could have it as a process.env property and then do:

fetch(`${process.env.API_URL}/transcribe`, { ... })

CodePudding user response：

Host names for docker container communication are only possible if you define a user defined bridge network. Here's an example:

(On your docker-compose.yml)

...
networks:
  my_network:
    driver: bridge

Here's a link to the Docker docs just in case. Let me know if this helped!