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?