Javascriptで外部APIを呼び出す

Question

Javascriptを使用して自分のWebページから外部サーバーにPOST要求を行う必要があります。ボディとレスポンスはどちらもjsonです。私はこの呼び出しを行う方法や使用するツールを理解できません。この電話をかけるにはどうすればいいですか？ 「エラー：」：それはちょうど「ステータス」と言う警告を投げている

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

：

コンソールは、この「XMLHttpRequestのは言う

この

は、私がこれまでjQueryとAJAXを使用しているものです http://[domain]/vizportal/api/web/v1/getViewsをロードできません要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーが存在しません ' http://[domain]'の発信元はアクセスが許可されていません。

Answer 1

あなたは、コールの宛先の所有者はいますか？はいの場合は、サーバー側にCORSヘッダーを実装します。

もしそうでなければ、JSONP（CORSをバイパスします）を使用するか、外部リクエストをルーティングするために所有するサーバー側プロキシを実装することもできます（もちろんCORSを実装します）。あなたはより多くの情報が必要な場合

はMDNでCORSの記事をチェックアウト：HTTP access control (CORS) on MDN

Answer 2

JQUERYとAjAXを使用できます。あなたは、ポストまたは取得方法のいずれかであなたのAPIとの間で情報情報を送受信することができます。

それはそのようなものになるだろう：

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

を提出し、 http://api.jquery.com/jquery.ajax/

Answer 3

あなたはjqueryの使用している場合は、.post使用、またはアヤックス：

$("#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. 
     } 
    }); 
}); 

アヤックスこれらの方法の詳細はこちらhttp://api.jquery.com/jquery.ajax/

例：あなたがここにいわゆる同一生成元ポリシーに違反している

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

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

Answer 4

。ほとんどのブラウザでは、スクリプトが存在するページと同じホスト名とポートを持たないURLにスクリプトがアクセスすることはできません。これは非常に厳しいセキュリティポリシーであり、テスト目的でさえも克服することは非常に困難でした。

従来、これを回避する最も簡単な方法は、独自のWebサイトをプロキシとして使用し、それを介して要求を外部サーバーに転送することでした。しかし、そのようなソリューションを実装するために自分のサイトで十分なコントロールを持っていないと、状況はより複雑になりました。 「同じ起源 - 方針」でインターネットを検索すると、トピックやそれを解決するための他のアイデアについて多くの議論があります。

私が最初に提案したのは、エラーメッセージに記載されている「Access-Control-Allow-Origin」をチェックすることです。これはCORSという新しいスキームに関連しており、最近（2014年）W3C勧告に追加されており、多くのブラウザの最新バージョンで広くサポートされているようです。たぶん私たちの開発者は、この刺激的な問題に取り組むための道具を最終的に手に入れています。

Answer 5

異なるドメインajax呼び出しを使用する場合は、ブラウザが相互ドメイン要求を行うことができるJSONPデータ型を使用する必要があります。ここで

は、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); 
      } 
     });