Docker and Angular SRR not connecting to backend

Question

I'm trying to divide my application into multiple containers: frontend (Angular), backend (.NET) & database (MySQL).

I've set up all containers and they are running fine there isn't any problem except I'm doing this on the server side. If I open the website on my everything works as expected except the backend rest api request. (error message below)

This is my architecture:
The host machine is running nginx server and using reverse proxy to redirect to frontend or backend. Let's say my domain is example.com, the configuration looks like this:
example.com -> frontend:8080
example.com/api -> backend:8081

My frontend throws following error if I run "docker logs frontend_id":
'Http failure response for https://example.com/api/Product/recommendation: 0 Unknown Error'

First I was thinking it's a CORS problem, so I've added all domains that came into my mind to the cors list, domains like 127.0.0.1 with ports, localhost with ports and example.com with ports

This is the docker-compose configuration I'm using:

version: '2'

services:
  aa_webshop:
    image: image_frontend:dev
    container_name: webshop
    ports:
      - "8080:4000"
    links:
      - aa_backend

  aa_backend:
    image: image_backend:dev
    container_name: backend
    ports:
      - "8081:80"
    networks:
      default:
        aliases:
          - example.com

Backend is listening to ports 80 and 443. This is the configuration of my launch settings:

    "Docker": {
      "commandName": "Docker",
      "launchBrowser": false,
      "environmentVariables": {
        "ASPNETCORE_URLS": "https://+:80;http://+:80",
        "ASPNETCORE_HTTPS_PORT": "80"
      },
      "httpPort": 80,
      "useSSL": false,
      "sslPort": 80
    }

I'm mapping all to 80 since I don't support SSL for the connection between nginx and container. But nginx itself is protected by certbot and thus supports SSL.

Do you have any ideas for me? As I've mentioned before: the nginx is running on the host machine.

Thanks in advance!

Kind regards yadbo

edit: added nginx configuration:

server {
        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name example.com;

        location / {
                proxy_set_header X-Forwarded-For           $proxy_add_x_forwarded_for;
                proxy_set_header Host $host;
                proxy_pass http://localhost:8000/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";

                location /api/ {
                        proxy_pass http://localhost:8081/api/;
                        proxy_redirect off;
                }

                location /images/ {
                        proxy_redirect off;
                }

                location / {
                        auth_basic "Protected";
                        auth_basic_user_file /etc/nginx/.htpasswd;
                        proxy_pass http://localhost:8080/;
                        proxy_redirect off;
                }
        }

    ssl_protocols TLSv1.2;

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.comprivkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80 default_server;
        listen [::]:80 default_server;

        server_name example.com;
    return 404; # managed by Certbot
}

edit 2: added frontend request code (swagger auto generated client)

construcotr(private httpClient: HttpClient) {}
return this.httpClient.get<Array<ProductPreviewDto>>(`${this.configuration.basePath}/api/Product/recommendation`);

BasePath in our case ist https://example.com

I'm also using an interceptor to add the JWT information:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type' : 'application/json; charset=utf-8',
        'Accept'       : 'application/json',
        'Authorization': `Bearer ${this.cookieServie.get(CookieNamesEnum.SESSION)}`,
      },
    });

    return next.handle(req);
  }