Connection Refused Error on React using env Variables from Docker

Question

I'm trying to define some env variables in my docker files, in order to use these in my react application:

The next is my docker file in the Node server side:

FROM node:lts-slim

RUN mkdir -p /app

WORKDIR /app
# install node_modules
ADD package.json /app/package.json
RUN npm install --loglevel verbose
# copy codebase to docker codebase
ADD . /app

EXPOSE 8081

# You can change this
CMD [ "nodemon", "serverApp.js" ]

This is my docker-compose file:

version: "3"
services:
  frontend:
    stdin_open: true
    container_name: firestore_manager
    build:
      context: ./client/firestore-app
      dockerfile: DockerFile
    image: rasilvap/firestore_manager
    ports:
      - "3000:3000"
    volumes:
      - ./client/firestore-app:/app
    environment:
      - BACKEND_HOST=backend
      - BACKEND_PORT=8081
    depends_on:
      - backend
  backend:
    container_name: firestore_manager_server
    build:
      context: ./server
      dockerfile: Dockerfile
    image: rasilvap/firestore_manager_server
    ports:
      - "8081:8081"
    volumes:
      - ./server:/app

This is the way in which I'm using it in the react code:

axios.delete(`http://backend:8081/firestore/`, request).then((res) => {....

But I'm getting a connection refused Error. I'm new with react and not pretty sure how can I achieve this.

Any ideas?

Answer 1

Your way of requesting the service looks fine : http://foo-service:port.
I think that your issue is a security issue.
Because the two applications are not considered on the same origin (origin = domain + protocol + port), you fall into into a CORS (Cross Origin Resource Sharing) requirement.
In that scenario, your browser will not accept to perform your ajax query if the backend didn't return a its agreement to the preflight CORS request to share its resources with that other "origin".
So enable CORS in the backend to solve the issue (each api/framework has its own way).
Maybe that post may help you for firebase.