Agregar la API Emotion de Microsoft al sitio web HTML

Intento simplemente crear una página web HTML que me dé emociones a partir de imágenes ingresadas por el usuario. Usando la documentación de Microsoft, creé un archivo HTML a continuación:

   JSSample     $(function() { $.ajax({ url: "https://api.projectoxford.ai/emotion/v1.0/recognize", beforeSend: function(xhrObj){ // Request headers xhrObj.setRequestHeader("Content-Type","application/json"); xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","my-key"); }, type: "POST", // Request body data: {"url": "http://sofes.miximages.com/javascript/recognition1.jpg"}, }) .done(function(data) { alert("success"); }) .fail(function() { alert("fail"); }); });    

Tengo entendido que esto debería funcionar sin necesidad de un servidor, sin embargo, siempre recibo un mensaje de error al cargar el sitio web. Cualquier ayuda funcionaría, ¡gracias!

Utilice la herramienta de prueba de API que tenemos (Microsoft) aquí: https://dev.projectoxford.ai/docs/services/5639d931ca73072154c1ce89/operations/563b31ea778daf121cc3a5fa/console

Asegúrese de que puede hacer una solicitud correcta y de que realmente está configurando su clave de API y no está enviando mi clave de nuevo.

Si su clave no es válida, obtendrá un error en la consola de JavaScript: el encabezado ‘Access-Control-Allow-Origin’ está presente en el recurso solicitado.

Si su clave es válida pero no se han escapado sus datos, obtendrá un error de solicitud incorrecta de 400. Actualice su campo de datos para ajustarlo con ”. Vea mi ejemplo aquí (complete su clave) http://jsfiddle.net/w3npr1ue

 $(function() { $.ajax({ url: "https://api.projectoxford.ai/emotion/v1.0/recognize", beforeSend: function(xhrObj){ // Request headers xhrObj.setRequestHeader("Content-Type","application/json"); xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","SetYourKey"); }, type: "POST", // Request body data: '{"url": "http://sofes.miximages.com/javascript/Asa+and+Dada+in+st.+petersburg+Small.jpg"}', }) .done(function(data) { alert("success"); }) .fail(function(error) { console.log(error.getAllResponseHeaders()); alert("fail"); }); });