在反应中将授权传递给cloudinary

Question

我正在制作一个应用程序的前端，我需要将图像上传到 cloudinary 并传递密钥和秘密。我试过这个：

function handleFiles(files) {
    const url = CLOUDINARY_URL
    const formData = new FormData()
    formData.append("file",files[0])
    formData.append('upload_preset',IMAGE_FOLDER)
    fetch(url,{
      method: "POST",
      //headers: {
      //  'Authorization': 'Basic ' + CLOUDINARY_KEY + ":" + CLOUDINARY_SECRET,
      //},
      body: formData
    }).then(response => {console.log("resp ",response); return response.text()})
    .then(data => console.log("data ", data))
}

此代码适用于不需要授权的云名称，但是当我取消注释标题部分时，会出现下一个错误 跨域请求被阻止：同源策略不允许读取位于 CLOUDINARY_URL 的远程资源。 （原因：根据 CORS 预检响应中的标头“Access-Control-Allow-Headers”，标头“授权”是不允许的）

我怎样才能做到这一点？还是有其他方法可以从反应上传图像？ 提前致谢。

Answer 1

Cloudinary Upload API 不使用基本授权方法对您的上传进行签名。但是，它可以使用与您的后端签名的签名上传预设或未签名的上传预设上传。我建议检查他们的documentation 以了解差异。

通过网络上传最简单的方法是使用 Cloudinary 的 Upload Widget，虽然它不是特定于 React 的。这是基于 JavaScript 的解决方案，您可以与您的 React 应用程序集成

最后一点，请记住，您的 API 凭据，特别是 API 机密应该被视为您的密码。由于 React 是一个客户端应用程序，因此您不应将 API 机密放在那里。