Chiamare l'API esterna con Javascript

Question

Ho bisogno di fare una richiesta POST a un server esterno dalla mia pagina web utilizzando Javascript. Il corpo e la risposta sono entrambi json. Non riesco a capire come effettuare questa chiamata o quali strumenti utilizzare. Come faccio questa chiamata?

Questo è quello che ho finora utilizzando jQuery e Ajax:

var body = '{"method":"getViews","params":{"filter":{"operator":"and","clauses":[{"operator‌​":"matches","value":"'+ inputValue +'"}]},"order":[{"field":"name","ascending":true}],"page":{"startIndex":0,"maxIt‌​ems":5}}}'; 
var response = $.ajax({ 
      url: "http://" + environment + "/vizportal/api/web/v1/getViews", 
      method: "post", 
      dataType:'json', 
      data: JSON.stringify(body), 
      headers: { 
      'Content-Type': 'text/plain', 
      'X-XSRF-TOKEN' : XSRFToken, 
      'Cookie': 'workgroup_session_id='+workgroupSessionId+';XSRF-TOKEN='+XSRFToken 
      }, 
      success:function(response){ 
       alert("success"); 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
       alert("Status: " + textStatus); alert("Error: " + errorThrown); 
      } 
     }); 

Si sta gettando un alert che dice solo "Stato:" e "Errore:"

La console dice che questo "XMLHttpRequest impossibile caricare http://[domain]/vizportal/api/web/v1/getViews.Nell'intestazione 'Access-Control-Allow-Origin' è presente la risorsa richiesta.Nell'origine 'http://[domain]' non è quindi consentito l'accesso.La risposta aveva codice di stato HTTP 405. "

Answer 1

Sei il proprietario della destinazione della chiamata? In caso affermativo, implementare le intestazioni CORS sul lato server.

Se no, si può giocherellare con JSONP (si ignora CORS) o si può anche implementare un proxy lato server che si possiede per instradare le richieste esterne (e, naturalmente, implementare CORS lì).

Partenza l'articolo sulla CORS in MDN se volete maggiori informazioni: HTTP access control (CORS) on MDN

Answer 2

È possibile utilizzare JQUERY e AjAX. Puoi inviare/ricevere informazioni da/verso la tua API sia per posta che per metodo.

sarebbe qualcosa di simile:

$("#ButtonForm").click(function(){ 
$.ajax({ 
     url:(Your url), 
     dataType:'json', 
     type: 'post', 
     data: yourForm.serialize(), 
     success:function(response){ 
       ** If yout API returns something, you're going to proccess the data here. 
     } 
    }); 
}); 

Ajax: http://api.jquery.com/jquery.ajax/

Answer 3

Se si utilizza jQuery, utilizzare .post, o .ajax, a presentare

$.post(url, data, callbackSuccess, callbackError);

ulteriori informazioni su questi metodi qui http://api.jquery.com/jquery.ajax/

esempio:

var url = 'http://example.com/path/endpoint'; 

$.post(url, {name: 'Darlan', lastname: 'Mendonça'}, function(response){ 
    // callback success 
}, function(response) { 
    // callback error 
}); 

Answer 4

State violando la cosiddetta same-origin policy-qui. La maggior parte dei browser non consente a uno script di accedere agli URL che non hanno lo stesso hostname e la stessa porta della pagina in cui si trova lo script. Questa è una politica di sicurezza molto severa e spesso è stata molto difficile da superare anche a scopo di test.

Tradizionalmente, il modo più semplice per aggirare questo problema è stato utilizzare il proprio sito Web come proxy e inoltrare la richiesta attraverso il server esterno. Ma se non hai abbastanza controllo sul tuo sito per implementare una soluzione del genere, le cose sono state più complicate. Se cerchi su Internet la "politica della stessa origine", troverai molte discussioni sull'argomento e altre idee per risolverlo.

Il mio primo suggerimento sarebbe quello di controllare "Access-Control-Allow-Origin" che il tuo messaggio di errore menziona, sebbene io non abbia familiarità con me stesso. È collegato a un nuovo schema chiamato CORS che è stato recentemente aggiunto alle raccomandazioni del W3C (2014) e sembra avere un ampio supporto nelle versioni più recenti di molti browser. Forse noi sviluppatori stiamo finalmente ottenendo alcuni strumenti per lavorare con questo problema irritante.

Answer 5

Quando si desidera utilizzare una chiamata ajax di dominio diversa, è necessario utilizzare il tipo di dati JSONP che consentirà al browser di eseguire una richiesta di dominio incrociato.

Qui è più di documento per il JSONP: https://learn.jquery.com/ajax/working-with-jsonp/

var body = '{"method":"getViews","params":{"filter":{"operator":"and","clauses":[{"operator‌​":"matches","value":"'+ inputValue +'"}]},"order":[{"field":"name","ascending":true}],"page":{"startIndex":0,"maxIt‌​ems":5}}}'; 
var response = $.ajax({ 
      url: "http://" + environment + "/vizportal/api/web/v1/getViews", 
      method: "post", 
      dataType:'jsonp', 
      data: JSON.stringify(body), 
      headers: { 
      'Content-Type': 'text/plain', 
      'X-XSRF-TOKEN' : XSRFToken, 
      'Cookie': 'workgroup_session_id='+workgroupSessionId+';XSRF-TOKEN='+XSRFToken 
      }, 
      success:function(response){ 
       alert("success"); 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
       alert("Status: " + textStatus); alert("Error: " + errorThrown); 
      } 
     });