CORS error using angular httpClient with firebase functions - node.js

Question

I have this ngrx effect in my angular app that send an http request using httpClient
#Injectable()
export class MyEffects {
constructor(private actions$: Actions, private httpClient: HttpClient) {
}
sendEmail$: Observable<Action> = createEffect(() => this.actions$.pipe(
ofType(sendEmail),
concatMap(action =>
this.httpClient.post('https://us-central1-<PROJECT_ID>.cloudfunctions.net/myApi', action.data).pipe(
map(() => actionFinished({status: HttpActionsStatus.SUCCESS})),
catchError(() => of(actionFinished({status: HttpActionsStatus.ERROR})))
)
)
));
}
When I run this with firebase emulator (http://localhost:5001/<PROJECT_ID>/us-central1/myApi it works just fine, but when I deploy the app and trigger the request I get this error
Access to XMLHttpRequest at 'https://us-central1-<PROJECT_ID>.cloudfunctions.net/myApi' from origin 'https://<PROJECT_ID>.web.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
This is my functions file
const fs = require('fs');
const {promisify} = require('util');
const readFile = promisify(fs.readFile);
const admin = require('firebase-admin');
const handlebars = require('handlebars');
const nodemailer = require('nodemailer');
const functions = require('firebase-functions');
const email = decodeURIComponent(functions.config().gmail.email);
const password = encodeURIComponent(functions.config().gmail.password);
const cors = require('cors')({origin: true, optionsSuccessStatus: 200});
admin.initializeApp();
const transporter = nodemailer.createTransport({
service: 'gmail',
secure: false,
port: 25,
auth: {
user: email,
pass: password
},
tls: {
rejectUnauthorized: false
}
});
exports.myApi = functions.https.onRequest((request: any, response: any) =>
cors(request, response, () =>
readHTMLFile('../src/assets/html/new_message.html', (err: any, html: string) => {
const template = handlebars.compile(html);
const htmlToSend = template(request.body);
const mailOptions = {
to: email,
from: request.body.senderEmail,
subject: request.body.subject,
html: htmlToSend
};
return transporter.sendMail(mailOptions, async (error: any, {}) => {
if (!error) {
const responseEmailOptions = {
to: request.body.senderEmail,
from: email,
subject: request.body.subject,
html: await readFile('../src/assets/html/auto_reply.html'),
};
transporter.sendMail(responseEmailOptions);
return response.status(200).send(request.body);
}
throw error;
});
})
)
);
const readHTMLFile = (path: string, callback: any) => {
fs.readFile(path, {encoding: 'utf-8'}, (err: any, html: string) => {
if (!err) {
return callback(null, html);
}
throw err;
});
};
Basically what it does it to send an email and a verification email back to the sender.
I'll Appreciate your help!