I'm trying to delete an image with the REST API of Uploadcare, I'm doing exactly like the documentation and this post says, but still can't manage to delete an image, here is my code:
The html:
<html>
<script charset="utf-8" src="https://ucarecdn.com/libs/widget/3.2.2/uploadcare.full.min.js"></script>
<body>
<div class="main">
</div>
<div>
<button class="uploader">Upload an image</button>
<input class="deletet" />
<button class="getit">delete something</button>
</div>
</body>
<footer>Developep by Francisco Jimenez</footer>
</html>
The javascript:
function deleteb(uuid){
$.ajax({`
url: "https://api.uploadcare.com/files/"+uuid+"/",`
type: "DELETE",
headers: { "Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "*",
"Accept": "application/vnd.uploadcare-v0.5+json",
"Access-Control-Allow-Methods": "HEAD, GET, OPTIONS",
"Authorization": "Uploadcare.Simple publickey:privatekey"
},
success: function(result){
alert("yessss");
console.log(result);
},
error: function (result){
alert("ouuuh");
console.log(result);
}
});
}
The response that i keep getting is: Cross-Origin Request Blocked
: The Same Origin Policy disallows reading the remote resource at https://api.uploadcare.com/files/c2e166b5-17b9-493f-bf8c-b33da27842ca~1/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
What I'm doing wrong?
You are setting response CORS headers to the request. This doesn't make sense but more important is that server rejects your requests due to unrecognized headers. For example I get the following error with your code:
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
The following code works perfect for me:
$.ajax({
url: "https://api.uploadcare.com/files/8b147fe2-b677-407b-8c28-3d596187ac93/",
type: "DELETE",
headers: {
"Accept": "application/vnd.uploadcare-v0.5+json",
"Authorization": "Uploadcare.Simple demopublickey:demoprivatekey"
},
success: function(result){
alert("yessss");
console.log(result);
},
error: function (result){
alert("ouuuh");
console.log(result);
}
});