Issue with CORS while uploading images to Cloudinary from React application

Question

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?

Answer 1

The authentication for requests to the Upload API (which you are using based on the endpoint you're trying to call) is done via authentication signatures and not via Authorization (which is used with the Admin API). Therefore, you will want to remove the Authorization header. In addition, you will want to remove credentials:'include', from your request as well.

Since you're trying to use unsigned uploads (i.e. just with an upload preset) you won't need to generate a signature.

Also, your formData is being overwritten inside handleImageUpload and the value for upload_preset is lost. You will want to move the formData.append('upload_preset', ...) inside the handleImageUpload and ensure the file and upload_preset parameters are sent with your request to Cloudinary. You can do this by inspecting the browser's network tab as you send the request.