Dockerizing Mean Stack App on cloud instance and accessing it on browser

I have Dockerized a MEAN app on EC2 instance and trying to access the application(FrontEnd) on browser. I have linked three services i.e. FrontEnd, BackEnd and Database with the help of this docker-compose.yml

version: "2"
services:
  angular:
    build: ./FrontEndYb
    ports:
      - "8085:4200"
    links:
      - app
  app:
    container_name: app
    restart: always
    build: ./BackEndYb
    ports:
      - "3011:3011"
    links:
      - mongo
  mongo:
    container_name: mongo
    image: mongo
    volumes:
      - ./data:/data/db
    ports:
      - "27017:27017"

I am able to call my node api viz "VM-IP":3011/api/users with the help of Postman to store data into mongo container. I am calling the BackEnd api in my FrontEnd code as follow FrontEndYb/src/app/form.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class FormService {
    constructor(private httpClient: HttpClient) {
    }
saveInfo(firstname: string, lastname: string) {
        const headers = new HttpHeaders()
            .set('Authorization', 'my-auth-token')
            .set('Content-Type', 'application/json');
           this.httpClient.post('http://app:3011/api/users', {
          //here 'app' is  the name of node service written in docker-compose
            firstname: firstname,
            lastname: lastname
        }, { headers: headers }
).subscribe((response) => {
            console.log(response)
        });
    }
}

Also, my BackEnd/startup/routes.js

const express = require('express');
const users = require('../routes/users')

module.exports = function (app) {
    app.use(express.json())
    app.all("/*", function(req, res, next){
       res.header('Access-Control-Allow-Origin', '*');
       res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
       res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
    next();        
});
    app.use('/api/users', users);
}

The problem is, when I access the application on my browser and send some data from there, it gives this error

"""Access to XMLHttpRequest at 'http://app:3011/api/users' from origin 'http://54.169.178.148:8085' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

core.js:7187 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://app:3011/api/users", ok: false, …} error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …} headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)} message: "Http failure response for http://app:3011/api/users: 0 Unknown Error" name: "HttpErrorResponse" ok: false status: 0 statusText: "Unknown Error" url: "http://app:3011/api/users" proto: HttpResponseBase"""

In the above error 54.169.178.148 is my VM public IP

If I go inside FrontEnd container and call node container api viz http://app:3011/api/users, where 'app' is the name of node service as written in docker-compose.yml, it works fine. I know that instead of using this.http.post('http://app:3011/api/users',..), if I use the public IP of my VM i.e. this.http.post('http://VM-Public-IP/api/users',...) in my FrontEnd code, it works fine, there is no CORS issue, status 200.

When I access my app in browser, the url 'app:3011/api/users' does not exists because now it is in external world(outside of VM), then what is the best practice to call node api in such cases.

This is the github url for reference to full code if needed github.com/tarunchawla28/mean-docker

Thanks in advance.