Fail to resolve docker compose service name from front end

Question

Hi I'm new to using docker for development. I'm trying to communicate from frontend (react) to the backend (express.js) here.

I have enabled cors as well, I'm getting an error saying net::ERR_NAME_NOT_RESOLVED when trying to fetch from the back end using the url http://backend:4001,

but it's working when I use the docker internal IPAddress, like: http://172.18.0.3:4001.

Following is my docker-compose.yml file.

Please advise on getting this working, thanks.

version: "3"

services:

  backend:
    build: ./api
    volumes:
      - ./api:/usr/src/api
    ports:
      - 6002:4001
    depends_on:
      - database

  database:
    image: mongo:4.0.15-xenial
    ports:
      - 27018:27017


  frontend:
    build: ./app
    volumes:
      - ./app:/usr/src/app
    ports:
      - 6001:3000
    links:
      - backend
    depends_on:
      - backend

Answer 1

It will not work, because your browser(internet client) is not part of docker stack network, you have to configure you frontend service to connect to http://localhost:6002 instead of http://backend:4001