CODEWITHSUNDEEP
javascriptnode.jscloudinary
snipeshot
snipeshot

Reputation: 33

How do I fix CORS blocked error when uploading to Cloudinary

I'm making a personal website and need users to upload files to Cloudinary with signed uploads. My code is 

const cloudinary = require('cloudinary/lib/cloudinary').v2;

        cloudinary.config({ 
            cloud_name: 'cloud_name', 
            api_key: 'api_key', 
            api_secret: 'api_secret' 
        });


        cloudinary.uploader.upload(image,{public_id: id}, function(error, result) { });

Whenever I run cloudinary.uploader.upload i get this error in the browser 

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.cloudinary.com/v1_1/cloud_name/image/upload. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.cloudinary.com/v1_1/cloud_name/image/upload. (Reason: CORS request did not succeed).

Upvotes: 1

Views: 2109

Answers (1)

Collins Chikeluba
Collins Chikeluba

Reputation: 11

Same thing happened to me then I realized I forgot to add the API keys and secret environment variables to my deployed code. A CORS error just seems to pop up whenever there is an uncaught error. If you already have CORS enabled in the server and everything looks right with "CORS" then it is probably some other error.

Edit: Just to add to this, after I put in the correct api keys, I still had the same problem. It turns out that I was using firebase functions and it was weird with multer. I changed from multer to busboy and everything worked perfectly. See link: https://stackoverflow.com/a/47603055/15560288

Upvotes: 1

Related Questions