如何通过Cloudinary API获取文件夹列表至前端？后端实现方法

我尝试在Cloudinary中列出文件夹，前端调用API的代码如下：

fetch('https://api.cloudinary.com/v1_1/cloudName/folders', {
  method: 'get',
  headers: {
    'Authorization': 'Basic ' + "API" + ":" + "SECRET",
  },
}).then(res => res.json())

这个前端请求没法正常工作，想问下原因是什么？同时想知道怎么在后端实现这个功能？

更新内容：
我试了下面的代码：

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

还是出现同样的错误：

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

我的后端服务代码如下：

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);
}

后端控制器代码：

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

前端请求失败的原因 #

• 跨域限制：Cloudinary的管理API（包括文件夹列表接口）不允许直接从浏览器前端调用，一方面这类接口未配置CORS，浏览器会直接拦截跨域请求；另一方面，前端暴露API密钥和密钥等于把Cloudinary账号权限公开，绝对不能这么做，这是你看到TypeError: Failed to fetch的主要原因。
• 身份验证逻辑问题：第一次的代码直接把API:SECRET拼在Basic后，没有做Base64编码；后来的代码虽然做了编码，但跨域问题依然无法解决。

后端实现的修正方案 #

你的后端代码有两个明显问题：

1. 控制器里重新实例化了空的Cloudinary对象，没有传入配置好的账号信息，这个实例无权限调用Cloudinary API。
2. RootFolders()是异步方法，直接调用ToString()只会返回任务对象的字符串，拿不到实际的文件夹数据。

修正后的代码如下：

服务层（保留原有配置，新增获取文件夹方法） #

private readonly Cloudinary _cloudinary;

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);
}

// 添加获取根文件夹的异步方法
public async Task<RootFoldersResult> GetRootFoldersAsync()
{
    return await _cloudinary.RootFoldersAsync();
}

控制器代码修正 #

[AllowAnonymous]
[HttpGet("folders/")]
public async Task<IActionResult> GetFolders()
{
    var foldersResult = await _photoService.GetRootFoldersAsync();
    return Ok(foldersResult);
}

总结 #

• 永远不要在前端直接调用Cloudinary的管理API，必须通过后端中转，既避免密钥泄露，又解决跨域问题。
• 后端调用Cloudinary API时，要复用配置好的实例，并且正确处理异步方法，不能直接把任务对象转成字符串。

内容的提问来源于stack exchange，提问作者taleen wahdan