Search code examples
javascriptjsonpostgoogle-cloud-vision

Problems with POST to Google Cloud Vision via Javascript

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); }       );
Solution

  • 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>