My aim is to send a simple POST request to Google Cloud Vision API using javascript and jquery. When testing in Chrome, I encounter a 400 error in the console without any additional information for debugging. I'm hoping that someone with experience in Cloud Vision can pinpoint where I might be going wrong, especially when it comes to formatting the request body (data). The complete test code is shown below:
<html><head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20160511/json2.js"></script>
<script type="text/javascript">
var p = {"requests":[{ "image":{ "source":{"imageUri":"https://cloud.google.com/vision/docs/images/car.png"}} , "features": [{"type":"LABEL_DETECTION","maxResults":3}] } ]};
$.ajax({
type: "POST",
url: "https://vision.googleapis.com/v1/images:annotate?key=APIKEY",
data: JSON.stringify(p),
headers: {
"Content-Type": "application/json",
},
dataType: "json",
success: function(data, textStatus, jqXHR) {
alert(data);
}
});
</script>
</head></html>
I have consulted the following documentation for assistance: https://cloud.google.com/vision/docs/detecting-labels, but without success.
For your information, I have also attempted using the shorthand method, but it resulted in the same error:
var p = {"requests":[{ "image":{ "source":{"imageUri":"https://cloud.google.com/vision/docs/images/car.png"}} , "features": [{"type":"LABEL_DETECTION","maxResults":3}] } ]};
$.post( "https://vision.googleapis.com/v1/images:annotate?key=APIKEY", JSON.stringify(p) , function(data) { alert(data); } );