Angular does not retrieve objects nor messages from django endpoints on docker

Trying to deploy Django Rest Framework and Angular with Docker.

I have 3 containers: django, db and angular (with nginx on it)

The deployment is completed and I can open localhost:80 and see my angular components.

However, the component service is calling to http://localhost:8000/api/sensores/ to retrieve all the objects in the db (I made sure there is one object there, which I created from django shell, and reviewed it on the db container) and it is getting an error. Two logs appear on Chrome console:

Error al obtener sensores: ct {headers: e, status: 0, statusText: 'Unknown Error', url: 'http://localhost:8000/api/sensores/', ok: false, …}error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: 'error', …}headers: e {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}message: "Http failure response for http://localhost:8000/api/sensores/: 0 Unknown Error"name: "HttpErrorResponse"ok: falsestatus: 0statusText: "Unknown Error"url: "http://localhost:8000/api/sensores/"[[Prototype]]: zn ...
polyfills-FFHMD2TL.js:1

GET http://localhost:8000/api/sensores/ net::ERR_CONNECTION_REFUSED

From exec console in my angular-nginx container, I can make this:

curl http://api:8000/api/sensores/

And get the object I’m looking for, but angular can’t do it itself.

Here my docker-compose.yml:

version: '3.8'

services:
  angular:
    container_name: angular-nginx
    build: ./hello
      # context: ./hello
    ports:
      - "80:80"
    volumes:
      - ./hello/nginx.conf:/etc/nginx/nginx.conf:ro  
      - ./hello/dist/hello/browser:/usr/share/nginx/html
    depends_on:
      - db

  api:
    build:
      context: ./django
    command: gunicorn helloDocker.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - ./django:/app
    expose:
      - "8000"
    environment:
      - DEBUG=False
      - DJANGO_SECRET_KEY=your_secret_key
      - DATABASE_URL=postgres://myuser:mypassword@localhost:5432/vituclim
    depends_on:
      - db

  # Servicio de base de datos
  db:
    container_name: postgre
    image: postgres:latest
    environment:
      POSTGRES_DB: vituclim
      POSTGRES_USER: myuser
      POSTGRES_PASSWORD: mypassword
    volumes:
      - db_data:/var/lib/postgresql/data

volumes:
  db_data:

This is my nginx.conf, in angular project folder:

user nginx;
worker_processes auto; 
pid /var/run/nginx.pid; 

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types; 
    default_type  application/octet-stream; 

    access_log  /var/log/nginx/access.log;

    server {
        listen 80;

        server_name localhost;

        location / {
            root /usr/share/nginx/html;  
            index index.html;            

            try_files $uri $uri/ /index.html;
        }

        location /api/ {
            proxy_pass http://api:8000/;o
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

    }
}

For the last config for /api/ directions, it doesn’t work with or without it.

I expect to call the component service and retrieve a list of objects (Sensor) to show on the HTML. The TS & HTML of the component are fine, as the problem comes from the service. This is the service component:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Sensor } from './sensor';

@Injectable({
  providedIn: 'root'
})
export class HelloWorldService {

  private nombreContenedorDjango = 'api'

  private apiUrl = 'http://'+this.nombreContenedorDjango+':8000/api'; // URL del backend

  constructor(private http: HttpClient) {}

  getMessage(): Observable<{message: string}> {
    return this.http.get<{message: string}>(`${this.apiUrl}/mensaje/`);
  }

  getSensores(): Observable<Sensor[]> {
    return this.http.get<any>(`${this.apiUrl}/sensores/`);
  }
}

I suppose the problem comes from angular, or nginx configuration. But I can’t see it clearly.