CODEWITHSUNDEEP
reactjscorsvitecloudinary
soul2seul
soul2seul

Reputation: 1

GET request from Cloudinary Failed. Error: No 'Access-Control-Allow-Origin' header is present on the requested resource

I'm making a request to cloudinary API from a React & Vite App. I Keep getting these two errors:

Acess to XMLHttpRequest at 'https://api.cloudinary.com/v1_1/sombra/image/list' from origin 'https://7aac-2806-2a0-1400-85b6-f0cb-e8b0-4880-f0ed.ngrok-free.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

and

ImageGallery.jsx?t=1688258885347:26 GET https://api.cloudinary.com/v1_1/sombra/image/list net::ERR_FAILED 404 (Not Found) (i checked many times and the cloud name is correct)

This is the component:

import { useEffect, useState } from 'react';
import axios from 'axios';

const ImageGallery = () => {
  const [images, setImages] = useState([]);

  useEffect(() => {
    const fetchImages = async () => {
      try {
        const response = await axios.get(
          'https://api.cloudinary.com/v1_1/sombra/image/list'
        );

        setImages(response.data.resources);
      } catch (error) {
        console.error('Error fetching images:', error);
      }
    };

    fetchImages();
  }, []);

  return (
    <div>
      <h1>Image Gallery</h1>
      <div>
        {images.map((image) => (
          <img
            key={image.public_id}
            src={image.secure_url}
            alt={image.public_id}
          />
        ))}
      </div>
    </div>
  );
};
export default ImageGallery;

I tried to make a tunnel since apparently this error is very common and it can be caused by my PC. Also tried to update CORS rules in my vite.config.js file but doesnt seem to work either. This is the code that I'm pasting

 server: {
    proxy: {
      "/api": {
        target: "https://api.cloudinary.com/v1_1/sombra/image/list",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

Please help!!

Upvotes: 0

Views: 594

Answers (3)

Imran.Khan
Imran.Khan

Reputation: 184

Make sure to replace your_api_key , your_api_secret and cloud name with your actual Cloudinary credentials.

To fetch the JSON data, use the following URL:

https://<API_KEY>:<API_SECRET>@api.cloudinary.com/v1_1/<CLOUD_NAME>/resources/image

The output will resemble the following structure:

{
"resources": [
{
  "asset_id": "***",
  "public_id": "***",
  "format": "jpg",
  "version": 1725557946,
  "resource_type": "image",
  "type": "upload",
  "created_at": "***",
  "bytes": 207897,
  "width": 1000,
  "height": 560,
  "asset_folder": "***",
  "display_name": "***",
  "access_mode": "public",
  "url": "***",
  "secure_url": "***"
}], "next_cursor": "****"}

Upvotes: 0

Aleksandar
Aleksandar

Reputation: 1708

Firstly, the API endpoint you are making a request to (https://api.cloudinary.com/v1_1/sombra/image/list) doesn't match any Cloudinary API endpoint.

I assume you were attempting to call the Get Resources method of the Admin API to get a list of assets with "resource_type" image and "type" list. If so, the request URL is missing the resources after your cloud name. In other words, it should be:

https://api.cloudinary.com/v1_1/sombra/resources/image/list

Admin API methods are not supported to be called as part of Cross-Origin requests (e.g. through AJAX/XHR etc) and therefore, the CORS error you are seeing is expected and the correct response.

The Admin API use Basic Authentication with your cloud's API Key and API Secret. The API Secret should not be used/exposed on the client side and only be used on the server side.

If you want to use any of the methods that are part of the Admin API, you should make the requests from your backend server. You can do so by either directly calling the API endpoint with any HTTP library or you could use one of Cloudinary's Backend SDKs to perform the call. The SDKs provide wrappers for Cloudinary's API, including Admin, and you can just call the dedicated methods of the API you want to invoke and pass the parameters it requires, without needing to construct the request yourself.

Upvotes: 0

Mbiplang Ardel
Mbiplang Ardel

Reputation: 700

You need to provide your API_KEY, API_SECRET, and your cloud_name which you can find on the dashboard, and replace it with the values in the URL below

import axios from 'axios';

const response = await axios.get("https://<API_KEY>:<API_SECRET>@api.cloudinary.com/v1_1/<cloud_name>/resources")

Here is a link to the documentation: Get resources from cloudinary

Upvotes: 0

Related Questions