Cors Error when upload to cloudinary direct from front-end

Question

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) {

  }

});
}

Cors errors usually pop up on poorly configured servers. Is there a possiblity to set cors on the cloudinary server? Maybe this answer could support u --> stackoverflow.com/questions/32500073/… — sagat
@sagat it appears the problem came from my chrome browser because i tested this code in OperaGX and it worked perfectly if you have any idea how to solve this problem tell me — AOUADI Slim
I would suggest to you to inspect the preflight request and the needed headers on it in the chrome dev tools. Chrome is state of the art. Regardless of Opera working only little percentage of users use opera or anything else. regards — sagat

Aleksandar Aleksandar · Accepted Answer · 2020-07-30T16:15:57

If we send an OPTIONS request to Cloudinary we can check the related Access-Control headers.

curl -iX OPTIONS https://api.cloudinary.com/v1_1/cloud/image/upload

HTTP/1.1 200 OK
Access-Control-Allow-Headers: Cache-Control, Content-Disposition, Content-MD5, Content-Range, Content-Type, DPR, Viewport-Width, X-CSRF-Token, X-Prototype-Version, X-Requested-With, X-Unique-Upload-Id
Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS
Access-Control-Max-Age: 1728000
Cache-Control: no-cache
Content-Type: text/plain; charset=utf-8
Date: Thu, 30 Jul 2020 15:20:11 GMT
Server: cloudinary
Status: 200 OK
Vary: Accept-Encoding
X-Request-Id: 4b3cb7f430585a4bc27d3ce4e559ced1
X-UA-Compatible: IE=Edge,chrome=1
X-XSS-Protection: 1; mode=block
Content-Length: 0
Connection: keep-alive

Based on the error message you shared - Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response - your upload request has an 'authorization' header which isn't allowed for cross-origin requests because it's not listed under the response header Access-Control-Allow-Headers. You will want to double-check the request your configuration/code is making and ensure this header is not part of the upload call as it's not needed.

Below is the least amount of code needed for an upload request. It will upload a 1x1px image submitted as Base64 Data URI. (just replace <cloud_name> and <upload_preset>) -

var fd = new FormData();

fd.append("file", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/TQBcNTh/AAAAAXRSTlPM0jRW/QAAAApJREFUeJxjYgAAAAYAAzY3fKgAAAAASUVORK5CYII=");
fd.append("upload_preset", "<upload_preset>");

fetch('https://api.cloudinary.com/v1_1/<cloud_name>/upload',
  {
    method: 'POST',
    body: fd
  }
);

You could try using the above in your upload function rather than the current code and see if it works. It would use the default headers.

Cors Error when upload to cloudinary direct from front-end

1 Answers