web-dev-qa-db-ja.com

JavaScriptを使用して外部APIを呼び出す

JavaScriptを使用してWebページから外部サーバーにPOSTリクエストを作成する必要があります。本文と応答は両方jsonです。この呼び出しの方法や使用するツールはわかりません。 。この呼び出しを行うにはどうすればよいですか？

これは私がこれまでjQueryと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); 
            } 
        });

「ステータス：」と「エラー：」だけを示すアラートをスローしています

コンソールには、「XMLHttpRequestをロードできません http：// [domain]/vizportal/api/web/v1/getViews 。リクエストされたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません。Origin ' http：// [domain] 'は、したがってアクセスを許可されていません。応答にはHTTPステータスコード405が含まれていました。 "

javascriptapipost
10
anton2g

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

「いいえ」の場合、JSONPを使用して（CORSをバイパスする）、または外部リクエストをルーティングするために所有するサーバー側プロキシを実装することもできます（もちろん、そこにCORSを実装します）。

詳細情報が必要な場合は、MDNのCORSに関する記事をご覧ください。 MDN上のHTTPアクセス制御（CORS）

9
Mathieu Amiot

ここでは、いわゆる同一起源ポリシーに違反しています。ほとんどのブラウザは、スクリプトが配置されているページと同じホスト名とポートを持たないURLにスクリプトがアクセスすることを許可しません。これは非常に厳格なセキュリティポリシーであり、テスト目的であっても克服することが非常に困難な場合がよくあります。

従来、これを回避する最も簡単な方法は、独自のWebサイトをプロキシとして使用し、それを介して外部サーバーにリクエストを転送することでした。しかし、そのようなソリューションを実装するために自分のサイトを十分に制御できない場合、事態はより複雑になります。 「同じ起源ポリシー」でインターネットを検索すると、そのトピックに関する多くの議論とそれを解決するための他のアイデアが見つかります。

私の最初の提案は、エラーメッセージに記載されている「Access-Control-Allow-Origin」を確認することです。これは、ごく最近（2014年）W3C勧告に追加されたCORSと呼ばれる新しいスキームに関連しており、多くのブラウザーの最新バージョンで幅広くサポートされているようです。たぶん私たち開発者は、このいらいらする問題に対処するためのいくつかのツールを手に入れているかもしれません。

2
Fluster

JQUERYとAjAXを使用できます。 postまたはgetメソッドを使用して、APIとの間で情報情報を送受信できます。

次のようなものになります。

$("#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/

2
Arthur Medeiros

Jqueryを使用する場合は、.postまたは.ajaxを使用して送信します

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

これらのメソッドの詳細はこちら 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
});
1
Darlan Mendonça

異なるドメイン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); 
            } 
        });
1
Mitul