Quantcast
Channel: Recent Questions - Stack Overflow
Viewing all articles
Browse latest Browse all 11631

Issue with CORS while uploading images to Cloudinary from React application

$
0
0

I'm encountering a CORS-related issue while trying to upload images to Cloudinary from my React application running on http://localhost:5173. I have configured CORS on Cloudinary, included the necessary headers in my fetch request, and checked my Cloudinary account settings. However, I'm still facing the following error:

Access to fetch at 'https://api.cloudinary.com/v1_1/<cloud_name>/image/upload' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

  const formData = new FormData();    formData.append('upload_preset',"<upload_preset>")    const handleImageUpload = async () => {        try {            const formData = new FormData();            // Populate formData with images            for (const image of images) {                formData.append('file', image); // 'file' is a common parameter name for image uploads            }            // Cloudinary upload endpoint            const cloudinaryUploadUrl = 'https://api.cloudinary.com/v1_1/<cloud_name>/image/upload';            // Fetch request            const response = await fetch(cloudinaryUploadUrl, {                method: 'POST',                credentials:'include',                body: formData,                headers: {'Authorization': 'Bearer CLOUDINARY_key', // Replace with your Cloudinary API key                },            });            // Check the response            console.log(response);            if (response.ok) {                const data = await response.json();                console.log(data);            } else {                // Handle error response                console.error('Error uploading images:', response.statusText);            }        } catch (error) {            // Handle other errors            console.error('Error uploading images:', error);        }    };

I have ensured that the Cloudinary API key is set in the 'Authorization' header and that the credentials mode is set to 'include'.

Has anyone faced a similar issue or can provide insights into resolving this CORS problem when uploading images to Cloudinary from a React application?


Viewing all articles
Browse latest Browse all 11631

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>