How to get folder list from API to Frontend using cloudinary?

I am trying to list folders in cloudinary and here is what I did:

I tried this it is not working:

fetch('https://api.cloudinary.com/v1_1/cloudName/folders', {

  method: 'get',

  headers: {

    'Authorization': 'Basic ' + "API" + ":" + "SECRET",

  },

}).then(res => res.json())

it is not working from frontend, why? How to do that in backend?

**update: here is what I tried

const base64EncodedAuthString = btoa(`${this.ApiKey}:${this.ApiSecret}`);

fetch('https://api.cloudinary.com/v1_1/hspa2024/folders', {
  method: 'get',
  headers: {
    'Authorization': `Basic ${base64EncodedAuthString}`,
  },
}).then(res => res.json())

still same error: ERROR Error: Uncaught (in promise): TypeError: Failed to fetch TypeError: Failed to fetch

in my backend service:

public PhotoService(IConfiguration config)
    {
        Account account = new Account
        (
            config.GetSection("CloudinarySettings:CloudName").Value,
            config.GetSection("CloudinarySettings:ApiKey").Value,
            config.GetSection("CloudinarySettings:ApiSecret").Value
        );
        cloudinary = new Cloudinary(account);
    }

and in my backend controller i have:

[AllowAnonymous]
    [HttpGet("folders/")]
    public string GetFolders()
    {
        Cloudinary cloudinary = new Cloudinary();
        return cloudinary.RootFolders().ToString();
    }

The Admin API requires your API Secret which should only be exposed on the backend and also, this API is not allowed (restricted via CORS) to be called from the frontend.

You should make the API call to Cloudinary from your backend and send the data to your frontend. The Admin API exposes the Get root folders and Get sub-account folders methods which you can use to get the list you're looking for.