Cors Error when upload to cloudinary direct from front-end

am trying to upload to a Cloudinary server directly from my client so i could track the progress of the upload but the problem is that when i trigger the post request it always gets

"Access to XMLHttpRequest at 'https://api.cloudinary.com/v1_1/[cloudName]/image/upload' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response"

when i tried the same code in my friend's project it worked fine but for me it doesn't which is weird i didn't know where the problem is coming from

my upload function :

uploadPhotos() {

this.coverPhotoFormData.append("file", this.coverPhotoFile);
this.coverPhotoFormData.append("upload_preset",[PresetName]);
const req = new HttpRequest('POST', 'https://api.cloudinary.com/v1_1/[CloudName]/image/upload',
this.coverPhotoFormData, {
reportProgress: true,
});

this.http.request(req).subscribe(event => {
let total = 0;
if (event.type === HttpEventType.UploadProgress) {
const percentDone = Math.round(100 * event.loaded / event.total);
console.log(percentDone)
} else if (event instanceof HttpResponse) {

}

});
}

Continue reading...