'Access-Control-Allow-Origin' header is present on the requested resource.

LifChat

June 16, 2021 10:56

I'm trying to upload an image to cloudinary in next js I keep getting this error "innovatorCreateAccount:1 Access to XMLHttpRequest at 'https://api.cloudinary.com/vi_1/lifchatmedia/image/upload' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." Attached are my code and the error. Any help would be highly appreciated. Thanks in advance

 

0

• 

  Aleksandar Kostadinov

  June 17, 2021 09:22

  Hi,

  Thanks for sharing the code and error you are receiving. I see that the URL endpoint for upload that you are using is not correct. Notice it has vi_1 which should be v1_1. May I please ask you to update that?

  In addition, you can remove a few of the parameters and headers you are currently sending as they are not needed. Specifically:

  1. Remove the 'Access-Control-Allow-Origin' header from your config - this header is something Cloudinary returns and is not needed as part of the request.
  2. Remove the 'cloud_name' from the FormData - this is not needed because it's already part of the upload API endpoint.

  Please let me know if the uploads work after making the above changes.

  0
• 

  Akash Dubey

  January 23, 2022 23:43

  this is still not working 

  0
• 

  Aleksandar Kostadinov

  January 24, 2022 00:54

  Hi @Akash,

  May I please ask you to provide more information about the issue you're seeing, including the exact error message and code you are using to upload?

  If you'd like to submit this information to us directly (not here in the forums) then please create a ticket by sharing the above details using the following form - https://support.cloudinary.com/hc/en-us/requests/new

  Looking forward to your response

  0

Post is closed for comments.