注: すべてのリンクを投稿するほどの評判はありません。そのため、テキスト エディターがリンクとして読み取らないように、最初の文字を削除しました。それらに移動するには、アドレスバーに貼り付けて、先頭に h を追加してください。
Khan Academy の API を使用してユーザー データにアクセスしようとしていますが、API または AJAX を使用したのはこれが初めてです。これまでのところ、ビデオや演習のデータを取得することはできましたが、OAuth を使用してユーザー データを取得するのに問題があります。カーン アカデミーの承認に関する情報は次のとおりです。OAuth 1.0 を使用します。これが私が使用しているOAuthライブラリです。KA API のドキュメントは次のとおりです: http://api-explorer.khanacademy.org/
var oauth = OAuth({
consumer: {
public: '****************',
secret: '****************'
},
signature_method: 'HMAC-SHA1'
});
var request_data = {
url: 'http://www.khanacademy.org/api/v1/exercises/logarithms_1',
method: 'GET'
};
$.ajax({
url: request_data.url,
type: request_data.method,
headers: oauth.toHeader(oauth.authorize(request_data))
}).done(function(data) {
alert("done");
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>KA API Test</title>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.23.1" />
<!-- sha1 -->
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha1.js"></script>
<!-- sha256 -->
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha256.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script>
<script src="oauth-1.0a.js"></script>
<script src="jquery-1.12.0.min.js"></script>
</head>
<body>
</body>
</html>
同じHTMLでこのJavascriptも試しました:
var oauth = OAuth({
consumer: {
public: 'qdMdMjjJQKrwJw2S',
secret: '7XeknfpVBzx8fGMK'
},
signature_method: 'HMAC-SHA1'
});
var request_data = {
url: 'http://www.khanacademy.org/api/v1/exercises/logarithms_1',
method: 'GET'
};
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.khanacademy.org/api/v1/exercises/logarithms_1", true);
xhr.setRequestHeader("Authorization", oauth.toHeader(oauth.authorize(request_data)));
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
function processRequest(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
for (var key in response) {
console.log(key + ":" + response[key]);
}
alert(response.translated_description_html);
}
}
どちらもコンソールに次のエラーを表示します: "XMLHttpRequest cannot load http://www.khanacademy.org/api/v1/exercises/logarithms_1 . Response to preflight request does not pass access control check: No 'Access-Control-Allow- Origin' ヘッダーが要求されたリソースに存在します。Origin ' http://localhost ' へのアクセスは許可されていません。"
注: XMLHttpRequest は正常に動作し、追加xhr.setRequestHeader("Authorization", "OAuth " + oauth.toHeader(oauth.authorize(request_data)));
する前に必要なものを返します。ただし、これは認証を必要としない単なるテスト リンクであり、後で変更します。
PSこのエラーを修正したいのですが、OAuthを正しく使用する必要があるだけで、OAuthを使用する前にエラーが発生しなかったため、関連していると思います。