Problems with POST to Google Cloud Vision via Javascript

Question

I'm attempting to make a very simple POST to Google Cloud Vision API via javascript with jquery. Testing in Chrome, I get a 400 error via the console and no further info to help in debugging. I'm hoping somebody out there has worked with Cloud Vision before or can at least see that I'm doing something obviously wrong here, say with formatting the request body (data). The entire test html / javascript 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've been using the following docs for help: https://cloud.google.com/vision/docs/detecting-labels, to no avail.

FYI, I've tried the shorthand too, but no worky, 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); }       );

I'm pretty sure the API is responding and that my API key is working. I've tested with deleting and resetting the key,etc. So I don't think it's an authentication issue. It seems to be a problem with the payload in data - but from the docs, it looks like I'm formatting propertly... If you change the data to {"request":[]} and don't stringify then the API responds with an empty set of some kind. That's the only variation I've ever received other than the 400 error. — A Moore, Jul 01 '17 at 15:38

score 1 · Accepted Answer · answered Jul 02 '17 at 00:19

I was able to get the following work without any issues, so I don't care about the jquery solution above anymore :)

<script type="text/javascript">
var b=JSON.stringify({"requests":[{  "image":{    "source":{"imageUri":"https://cloud.google.com/vision/docs/images/car.png"}}  ,  "features": [{"type":"LABEL_DETECTION","maxResults":5}]    } ]});
var e=new XMLHttpRequest;

e.onload=function(){console.log(e.responseText)};
e.open("POST","https://vision.googleapis.com/v1/images:annotate?key=APIKEY",!0);
e.send(b)
</script>

Problems with POST to Google Cloud Vision via Javascript

1 Answers1