1

I am using Docker Compose and Dockerfiles for the container builds and I have a problem with http requests which are not being made correctly from my Vite+React app that is in my 'frontend' container, the console shows 'Error Network'. This is my project repository: https://github.com/msebascp/TASKS_AUTH_REACT/tree/dev_docker

Things I've already checked: -All containers are on the same network. They ping, even when I make the http requests from the 'frontend' terminal with 'curl' they do ok and return what is expected. -I use the names of the services in the Vite+React app, for example, instead of using 'http://localhost:4000/api/login' as I would normally use in a local project, I use 'http:// backend:4000/api/login' since 'backend' is the name of my Node.js+Express container and 4000 is its port. -The requests are not made in the 'backend' since when they are made the container shows it by logs, but when the requests are made from the Vite+React app 'backend' does not show any log. -I have checked the cors configuration of the 'backend' and it seems to be fine:

app.use(
  cors({
    origin: ["http://frontend:5173", "http://localhost:5173"],
    credentials: true
  })
);

Code: -docker-compose.yml:

version: '3.8'
services:
  mongodb:
    container_name: mongodb
    image: mongo
    ports:
      - 27017:27017
    volumes:
      - ./data:/data/db
  backend:
    container_name: backend
    build: .
    depends_on:
      - mongodb
    ports:
      - 4000:4000
  frontend:
    container_name: frontend
    build: 
      context: .
      dockerfile: ./Dockerfile.frontend
    depends_on:
      - backend
    ports:
      - 5173:5173

-Dockerfile backend:

FROM node:18

WORKDIR /myapp
COPY package.json .
RUN npm install

COPY ./src ./src
CMD npm run start

-Dockerfile frontend:

FROM node:18

WORKDIR /myapp
COPY ./Client/package.json .
RUN npm install

COPY ./Client/ .
CMD npm run dev

-Vite.config.js:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    watch: {
      usePolling: true
    },
    host: true,
    strictPort: true,
    port: 5173
  }
});
Sebas
  • 11
  • 2
  • Is the React application actually running in a container, or is a container serving the code and it's being executed from the end user's browser? The browser isn't inside a container, and so React code can't usually use the Docker-network hostnames. – David Maze Jul 15 '23 at 10:18
  • @DavidMaze I think the Vite+React app works inside the container, right? Once I start the containers I connect to the container from my local browser using the port I have specified in the yml. The web is displayed correctly but every time it tries to make an http request it displays 'Network error' on the console – Sebas Jul 15 '23 at 15:14
  • I thought I had already tried it but I modified the request urls in the Vite+React app by changing 'backend' to 'localhost' and it works. I thought that I would have to use the names of the services because in other cases when I want to connect a container to another container with a database (mysql or mongodb) if I put 'localhost' in the host or in the url it doesn't work, for it to work I have to put the name of the service – Sebas Jul 15 '23 at 15:42
  • The trick here is that you're seeing the error message in your browser console, where it's output by the Javascript interpreter in the browser. The actual code is not running in a container with typical browser-based applications. – David Maze Jul 15 '23 at 19:32

0 Answers0