Request from the application inside the client container to the server container is not working

I have a React application and a server with a database. In the application, I make a request like fetch('http://serverstrapi:1337/api/auth/local/register/') or fetch('http://serverstrapi/api/auth/local/register/') and I see:

However, if I access the client container by exec and perform a ping 'serverstrapi', it is successful. Additionally, if I change 'serverstrapi' to 'localhost:3001', everything works fine, the external address works.

Here is the docker-compose:

version: '3'
services:
  client:
    build:
      context: ./client
      dockerfile: Dockerfile
    environment:
      - NODE_ENV=development
      - SERVER_PORT=1337
    volumes:
      - ./client:/app
    ports:
      - 8081:3000

  serverstrapi:
    build:
      context: ./server
      dockerfile: Dockerfile
    volumes:
      - ./server/config:/server/config
      - ./server/src:/server/src
      - ./server/package.json:/server/package.json
      - ./server/yarn.lock:/server/yarn.lock
      - ./server/.env:/server/.env
      - ./server/public/uploads:/server/public/uploads
    ports:
      - 3001:1337
    environment:
      - NODE_ENV=development
    depends_on:
      - db

  db:
    image: postgres
    restart: always
    env_file:
      - .env
    ports:
      - 4001:5432
    volumes:
      - ./db-data:/var/lib/postgresql/data

  adminer:
    image: adminer
    restart: always
    ports:
      - 5001:8080

  nginx:
    build:
      context: ./nginx
      dockerfile: Dockerfile
    ports:
      - 80:80
    depends_on:
      - client
      - serverstrapi

I have tried removing Nginx completely from the docker-compose file and deleting all networks and containers to start fresh. I have also tried various variations of the 'serverstrapi' address, such as with a port and without a port, etc.

I would appreciate any suggestions.

It seems like you're encountering an issue due to the way Docker networking and web browsers interact.

When you access the static page served by the client container from your browser, your browser retrieves the static files and then tries to execute the API calls. The problem arises because your browser is not part of the Docker network where the server container is running. Therefore, it cannot resolve the container name (or hostname) to an IP address.

In Docker, container names are resolvable to their respective IP addresses within the same Docker network. However, this name resolution is not accessible outside of the Docker network environment, which is why your browser can't resolve the hostname or container name to an IP.

In order to access your server container's API, you'll need to use either the IP address of the machine where Docker is running (assuming you've exposed the necessary ports) or a domain name that has been appropriately configured to point to that IP.

Remember, your client-side code (like JavaScript running in a browser) executes outside of the Docker environment, so it doesn't have access to the Docker internal DNS. Any API endpoints it needs to access must be reachable within the context of the network it's running on, typically the public internet if it's a web application.

Solution would be to pass the server api hostname/ip and port as environment variable to your react app container and you modify the url of the server api to the environment variables passed.