如何在反应中显示上传到 cloudinary 的图像 "Failed to load resource: the server responded with a status of 404 ()"

Question

按照此处的说明https://cloudinary.com/documentation/advanced_url_delivery_options#client_side_resources

我使用 fetch API 访问 .json 文件来显示上传的媒体，但出现错误“无法加载资源：服务器响应状态为 404 ()”

这是我的代码

  useEffect(() => {
    fetch(window.cloudinary.url("reactflix.json", {type: "list"}))
      .then(res => res.json())
      .then(
        (result) => {
          console.log(result)
        },
        
        (error) => {
          console.log('error')
        }
      )
  }, []);

我也试过了

  useEffect(() => {
    fetch('https://res.cloudinary.com/omama/image/list/reactflix.json')
      .then(res => res.json())
      .then(
        (result) => {
          console.log(result)
        },
        
        (error) => {
          console.log('error')
        }
      )
  }, []);

Answer 1

您在哪里找到云名称“omama”和标签“reactflix.json”？你可能想检查一下。

大多数时候 client-side 请求只是简单的 URL 请求，因此您无需检查您的应用程序，您可以直接在浏览器中访问它，但我建议使用 Postman。如果 URL 在您的浏览器中没有 return 任何内容，则它被视为 404。

Answer 2

Client-side resources (aka Resource List) are restricted by default and require a Signed URL 进行访问。由于您没有使用 Signed URL，出现 404 的最可能原因是您帐户中的设置是默认设置，因此此类型受到限制。

您可以通过转到帐户中的“设置”->“安全”选项卡并在“受限媒体类型”字段下确保未选中“资源列表”选项来进行检查。如果是，那么您可以取消选中并保存设置。

完成之后，您可以使用之前未测试过的新标签进行测试。这是因为如果 404 的原因确实是限制，那么您可能会从 Cloudinary 获得缓存的错误响应。使用新标签进行测试将确保您不会运行进入这种情况。

如何在反应中显示上传到 cloudinary 的图像 "Failed to load resource: the server responded with a status of 404 ()"

how to display images uploaded to cloudinary in react "Failed to load resource: the server responded with a status of 404 ()"

reactjs

cloudinary