Javascript API GETリクエストCORSエラー

私は間違った用語を使用すると非常に謝罪します。私はTrelloのAPIを使用してデータを取得しようとしているが、クロームコンソールで次のエラーが表示さ午前：Javascript API GETリクエストCORSエラー

はhttps://api.trello.com/1/cards/5a42e19364345a7d84ba3f5f/membersの読み込みに失敗しました：応答の値が「アクセス制御は許起源」ヘッダーがあってはなりません要求の資格情報モードが 'インクルード'の場合はワイルドカード '*'。 Origin 'http://localhost:8080'はアクセスできません。 XMLHttpRequestによって開始された要求の信任状モードは、withCredentials属性によって制御されます。

いくつかの調査を行った後、私はこれがCORSの問題であることを発見しました。私はPythonでGoogle App Engineを使用しています。このエラーは修正できますか、それともAPIのバグですか？私はこのAPIを使ってPOSTリクエストをしても問題はありません。私はCORSに関する多くの情報を読んだが、問題の解決策は見つけられていない。ここで

がGETリクエストのための私のJavascriptのコードで、それだけでコピーされる/貼り付けTrelloのAPIから私は間違っているかわからないんだけど：

var authenticationSuccess = function() { 
    console.log('Successful authentication'); 
}; 

var authenticationFailure = function() { 
    console.log('Failed authentication'); 
}; 

window.Trello.authorize({ 
    type: 'popup', 
    name: 'Work Requests App', 
    scope: { 
    read: 'true', 
    write: 'true' }, 
    expiration: 'never', 
    success: authenticationSuccess, 
    error: authenticationFailure 
}); 

var data = JSON.stringify(false); 

var xhr = new XMLHttpRequest(); 
xhr.withCredentials = true; 

xhr.addEventListener("readystatechange", function() { 
    if (this.readyState === this.DONE) { 
    console.log(this.responseText); 
    } 
}); 

xhr.open("GET", "https://api.trello.com/1/cards/5a42e1936434a7d84ba3f5f/members"); 

xhr.send(data);

出典

2017-12-27 user9109814

なぜあなたは 'withCredentials = true'を使用していますか？あなたはそれが何であるか知っていますか（https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials）？ – Phil

はい。 falseに設定すると、認証されません。また、なぜあなたはこの質問を重複としてマークしましたか？私はJava/Spring/Angular/SockJSを使用していませんが、どのような回答が私を助けてくれるのでしょうか？回答はありません。この問題はChromeの営業担当者にのみ発生しています。 – user9109814

再開封。それがとても異なっていたことを認識していませんでした – Phil

次の2つを一緒に結合しようとしているように見えますTrelloのAPIを使用するさまざまな方法 - client.jsを使用し、直接HTTPリクエストを行う。

TrelloのAPIを使って作業するとき、多くのヘルパー機能を提供するので、client.jsだけを使い始めることをお勧めします。たとえば、.authorize()メソッドでは、APIキーのトークンを生成し、ローカルに保存します。

<html> 
    <script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 
    <script src="https://trello.com/1/client.js?key=XXXXXXXXX"></script> 
    <script> 

    var requestSuccess = function(response) { 
     console.log(JSON.stringify(response, null, 2)); 
    } 

    var authenticationSuccess = function() { 
     console.log('Successful authentication'); 
     // Now that you are authenticated, you can start 
     // making requests to the API 
     window.Trello.rest("GET", "cards/5a42e1936434a7d84ba3f5f/members", requestSuccess); 
    }; 

    var authenticationFailure = function() { 
     console.log('Failed authentication'); 
    }; 

    window.Trello.authorize({ 
     type: 'popup', 
     name: 'Work Requests App', 
     scope: { 
     read: 'true', 
     write: 'true' }, 
     expiration: 'never', 
     success: authenticationSuccess, 
     error: authenticationFailure 
    }); 
    </script> 
</html>

あなたはあなたのAPI含める必要があります（trello.com/app-keyしばらく訪問から得たが、Trelloにログイン）：次のようになりますのみclient.jsあなたのコードを使用して、あなたの例では、あなたが持っているカードのデータを取得するための要求を作成するにはスクリプトにclient.jsを含めると上記のXXXXXXXXXをAPIキーに置き換えます。

TrelloのAPIに直接HTTPリクエストを行う場合は、トークンを生成する必要があります（APIキーを取得したページから行うことができます）。コードは次のようになります。

<html> 
    <script> 
    var xhr = new XMLHttpRequest(); 

    xhr.addEventListener("readystatechange", function() { 
     if (this.readyState === this.DONE) { 
     console.log(this.responseText); 
     } 
    }); 

    var yourToken = "XXXXXXXXXX"; 
    var yourKey = "XXXXXXXXXX"; 

    xhr.open("GET", "https://api.trello.com/1/cards/5a42e1936434a7d84ba3f5f/members?key=" + yourKey + "&token=" + yourToken); 

    xhr.send(); 
    </script> 
</html>

また、APIキーとトークンを追加する必要があります。

出典

2018-01-17 19:21:20

Javascript API GETリクエストCORSエラー

答えて

関連する問題