Unable to send requests from frontend to backend in Docker Compose environment

Docker Hub
1

Hi everyone,
I’m currently facing an issue with sending requests from my frontend to my backend server. I’m using Docker Compose to run the containers and I can successfully send requests using the backend’s IP address in the browser, but not with fetch or axios in my frontend code. I’ve tried various configurations and checked the /etc/hosts file in the frontend container, but I haven’t been able to resolve the issue yet. Any suggestions would be greatly appreciated. Thank you!

Here is my Dockercompose file;


services:
  database:
    image: postgres
    container_name: database
    ports:
      - "5434:5432"
    volumes:
      - database:/var/lib/postgresql/data
      - images:/app/public/images
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: 123
      POSTGRES_DB: nest
    networks:
      - transcendence

  backend:
    build:
      context: ./backend
    container_name: backend
    ports:
      - "3000:3000"
      - "5555:5555"
    volumes:
      - images:/app/public/images
    depends_on:
      - database
    networks:
       - transcendence
  
  frontend:
    build:
      context: ./frontend
    container_name: frontend
    ports:
      - "80:80"
    volumes:
      - images:/app/public/profilePhotos
    depends_on:
      - backend
    networks:
     - transcendence

volumes:
  images:
    driver_opts:
      o: bind
      type: none
      device: /root/src/volume/images
  database:
    driver_opts:
      o: bind
      type: none
      device: /root/src/volume/database

networks:
    transcendence:
        driver: bridge
2

Are those frameworks`? Can you explain what those two are?

I assume the frontend serves the code to be access by a web browser. When the frontend is accessed in the browser,

  • does it communicate to the frontend server, so the front end server communicates with the backend, then the frontend server renders content?
  • or does it directly communicate with the backend via rest/graphql?

Depending on where the process accessing the backed is executed, the solution will be different.