I’m working on a web project with a React frontend and a Node.js backend, both running in Docker containers. I'm using Docker Compose to orchestrate the services. The Node.js backend serves XML data and HTML content to the React frontend.

Project Structure:

• React Frontend: Serves the static site and fetches data from the Node.js backend.
• Node.js Backend: Provides the data and content to the React frontend.
• Traefik: Acts as a reverse proxy. Docker Compose Configuration:

Here’s a snippet of my docker-compose.yml:

version: '3.8'

services:
  react-app:
    container_name: "example-static-site-frontend"
    build:
      context: ./react-app
    networks:
      - t2_proxy
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.react.rule=Host(`static.example.in`)"
      - "traefik.http.routers.react.entrypoints=web"
      - "traefik.port=3472"
    depends_on:
      - node-app

  node-app:
    container_name: "example-static-site-backend"
    build:
      context: ./node-app
    networks:
      - t2_proxy

  traefik:
    image: "traefik:v2.9"
    container_name: "example-static-site-traefik"
    command:
      #- "--log.level=DEBUG"
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"
    ports:
      - "80:80"
      - "8080:8080"
    labels:
       - traefik.enable=true
       - traefik.http.routers.api.rule=Host(`example-static-site-traefik.example.in`)
       - traefik.http.routers.api.entrypoints=web
       - traefik.http.routers.api.service=api@internal
      #  - traefik.port=8080"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
    networks:
      - t2_proxy

networks:
  t2_proxy:

Problem:

I want to restrict access to the Node.js backend (node-app running on port 8672) so that it is not accessible from outside the Docker network. However, I still need the React frontend to fetch data from the Node.js backend using Axios.

I’ve tried removing the ports section from the node-app service and updating the Axios requests in the React app to use the Docker service name (node-app) instead of localhost, but I'm getting a 404 Page Not Found error when the React app (http://static.example.in/?site=a&page=b) tries to fetch the data.

Axios Configuration in React:

Here’s how I’ve updated the Axios calls in the React app:

// In App.js and xmlService.js
const response = await axios.get('http://node-app:8672/data.xml');

Questions:

How can I correctly configure Docker Compose and Axios in my React app to restrict external access to the Node.js backend while allowing internal communication between the services? What could be causing the 404 Page Not Found error when trying to fetch data from the backend, and how can I troubleshoot this issue? Any guidance or suggestions would be greatly appreciated!

I have tried replacing localhost with service name of node but it did not work.