Access-Control-Allow-Origin
This Error:
Access to fetch at 'https://api.cloudinary.com/v1_1/{cloud_name}/upload' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
This Code:
-
Hi,
In general, we take the value of the "Origin" request header and return that as part of the "Access-Control-Allow-Origin" response header which then allows the browser to proceed with the cross-origin request. If you didn't receive this header in the response to the pre-flight request, then it could be that this header was not sent for the requests you tested with for some reason.
Could you please try to update the code to the following and retry the upload request? I've removed some redundant parameters, like the cloud_name which should be part of your 'CLOUDINARY_URL'.
const body = new FormData()
file = input.files[0]
body.append("file", file)
body.append("upload_preset", CLOUDINARY_PRESET)
img = await fetch(CLOUDINARY_URL, {
method: "POST",
body: body
})
console.log(img)If you still encounter this error with the above code then please submit a ticket to us via - http://support.cloudinary.com/hc/requests/new - and share a HAR file export with the request/response headers for when you run into this issue for an upload. We will then be able to look into this further and provide some additional information.
Please sign in to leave a comment.
Comments
1 comment