Cors issue with docker, spring boot and angular app

I have a problem using docker for running my spring boot and angular application. Each time I want yo request the server I get the error Access to XMLHttpRequest at 'http://localhost:8080/api/media/users' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

When using my spring boot app and angular in local that is with no docker and with the command line npm start and mvn spring-boot:run everything is working great. This is how I configured cors on my backend :

@Configuration
public class RestConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://localhost:4200");
        config.addAllowedHeader("*");
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("DELETE");
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

But when using docker this is not working. With docker angular is served by a nginx server. This is the dockerfile used :

FROM nginx:alpine
LABEL author="Léo Vetter"
COPY ./config/nginx.conf /etc/nginx/conf.d/default.conf

The config for nginx is the following :

server {
    listen 0.0.0.0:80;
    listen [::]:80;
    default_type application/octet-stream;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    client_max_body_size    256M;

    root /usr/share/nginx/html;

    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

And my spring boot app is served by tomcat with the following dockerfile :

FROM tomcat:9.0-jre8-alpine

COPY target/backend-0.0.1-SNAPSHOT.war $CATALINA_HOME/webapps/api.war

Then I use docker compose to build my images and start the container. The docker-compose.yml file is as follow :

version: '2'

services:

  postgres:
    container_name: postgres
    image: postgres
    build:
      context: .
      dockerfile: ./backend/postgres.dockerfile
    networks:
      - helenos-network

  tomcat:
    container_name: tomcat-helenos
    image: tomcat-helenos
    build:
      context: ./backend
      dockerfile: tomcat.dockerfile
    ports:
      - "8080:8080"
    depends_on: 
      - postgres
    networks:
      - helenos-network

  nginx:
    container_name: nginx-helenos
    image: nginx-helenos
    build:
      context: ./frontend
      dockerfile:  nginx.dockerfile
    volumes:
      - ./frontend/dist:/usr/share/nginx/html
    ports:
      - "4200:80"
      - "443:443"
    depends_on: 
      - tomcat
    networks:
      - helenos-network

networks:
  helenos-network:
    driver: bridge

I use docker-compose build and docker-compose up -d to start build and start my container but then I get the annoying error Access to XMLHttpRequest at 'http://localhost:8080/api/media/users' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Can someone explain to me why this is working in local and not with docker ? And why do I have to do to get things working.

Thanks in advance.

Source: StackOverflow