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

Question

as instructed here https://cloudinary.com/documentation/advanced_url_delivery_options#client_side_resources

I used fetch API for accessing .json file to display uploaded media but an error occurs "Failed to load resource: the server responded with a status of 404 ()"

here's my code

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

I also have tried

  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

Client-side resources (aka Resource List) are restricted by default and require a Signed URL for access. Since you aren't using a Signed URL, the most likely reason for the 404 is that the setting inside your account is the default one hence this type is restricted.

You can check this by going to the Settings -> Security tab in your account and under the field "Restricted media types" ensure that the "Resource List" option is not checked. If it is, then you can uncheck that and Save the settings.

After doing that, you can test with a new tag which you haven't tested with before. This is because if the reason for the 404 was indeed the restriction then you may get a cached error response from Cloudinary. Testing with a new tag would ensure you don't run into this case.