Angular 13 and NESTjs API, HTTPS error " The page at ... was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint"

Question

I have an angular13 app with NESTJS api. Mi angular 13 projects is running ok on a shared domain, and registrered via letsncript automatically throug the hosting service. I don't have access to the key pem files. The hosting do it automatically.

All was working fine till we had installed a security connection to the site. So our site is now https.

The problem is when i make a call to the api, to create a new item, for example. It only works if I access wihtout ssl, for example http://app.finov...com. But if i try to access though https://app.finov...com it dosent work.

it returns the error:

" Mixed Content: The page at 'https://app.finoview.com/#/add-data' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://app.finoview.com:3030/company/undefined'. This request has been blocked; the content must be served over HTTPS."

Angular13 environment.prod.ts

var firebaseConfig = {
  apiKey: "AIza***",
  authDomain: "finovie****.firebaseapp.com",
  databaseURL: "https://fi***tdb.firebaseio.com",
  projectId: "finoview-9e496",
  storageBucket: "finovie***6.appspot.com",
  messagingSenderId: "634***7167",
  appId: "1:634970657167:web:4f******7ac4a53bfa",
  measurementId: "G-SJ6L***"
};

export const environment = {
  production: true,
  firebaseConfig,
  apiUri: "https://app.finoview.com:3030"
};

i tried to add this code to index.html in angular

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

It doesn't work.

i tried to change "http" to "https" in environment.prod.ts but it doen't work.

Thanks.