Q&A
「リクエスト時にアクセストークンを上手く含めることができず」というのは具体的にどういう状態でしょうか？ リクエストがそもそもエラーになるのでしょうか。それともトークンのないリクエストとなってしまうということでしょうか。現象を追記していただけると助かります。
###困っていること
teratailAPIを用いて、ランダムに質問を表示するアプリを作っているのですが、リクエスト時にアクセストークンを上手く含めることができずに困っております。
解決方法やヒントをいただけると幸いです。
###実践したこと
下記のリンクを参考に、以下のコードを書きました。
http://api.jquery.com/jQuery.ajax/
http://semooh.jp/jquery/cont/doc/ajax_event/
http://uhyohyo.net/javascript/13_1.html
http://docs.teratailv1.apiary.io/#introduction
html
1<html> 2 <head> 3 <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" /> 4 <link rel="stylesheet" type="text/css" href="./assets/css/questionToday.css"> 5 <link rel="stylesheet" type="text/css" href="./assets/css/reset.css"> 6 <title>今日の質問</title> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 8 <script type="text/javascript" src="./assets/js/questionToday.js"></script> 9 <script type="text/javascript" src="./assets/js/three.min.js"></script> 10 </head> 11 <body id="p-questionToday"> 12 13 <ul class="u-flexBox u-flexBox--alignCenter"> 14 <li class="j-startChangeId c-btn p-btnStart">スタート</li> 15 <li class="j-stopChangeId c-btn p-btnStop">ストップ</li> 16 </ul> 17 <p class="jt-stopChangeId p-questionId">0</p> 18 19 <div class="u-modal"> 20 <div class="p-questionBox"> 21 <h2 class="p-questionBox__ttl"></h2> 22 <pre class="p-questionBox__markdown"></pre> 23 </div> 24 <div class="p-answerBox"></div> 25 <p class="c-btn p-btnAnswer is-hidden">teratailで回答する</p> 26 </div> 27 </body> 28</html>
javascript
1$(function(){ 2 3 //最初にmaxのquestionIdを取得する 4 $.ajax({ 5 //アクセストークンを仕込む 6 beforeSend: function(xhr){ 7 xhr.setRequestHeader("Authorization", "Bearer " + "0123456789abcdef0123456789abcdef0123456789"); 8 }, 9 type: "GET", 10 url: "https://teratail.com/api/v1/questions?limit=1&page=1", 11 async: true, 12 dataType: "json", 13 success:function(json){ 14 $questionId = 0; 15 $maxId = json.questions[0].id; 16 17 //start 18 if($('.j-startChangeId').on('click', function(){ 19 //loop処理の上限値に最新のquestionIdを代入する 20 function loop () { 21 $questionId = Math.floor(Math.random()* $maxId)+1; 22 $('.jt-stopChangeId').text($questionId); 23 } 24 //questionIdをループで回す 25 $loopId = null; 26 clearInterval($loopId); 27 $loopId = setInterval(loop, 20); 28 })); 29 30 //stop 31 if($('.j-stopChangeId').on('click', function(){ 32 clearInterval($loopId); 33 $questionId = $('.jt-stopChangeId').text(); 34 $questionUrl = "https://teratail.com/api/v1/questions/" + $questionId; 35 //questionのリクエスト 36 $.ajax({ 37 //アクセストークンを仕込む 38 beforeSend: function(xhr){ 39 xhr.setRequestHeader("Authorization", "Bearer " + "0123456789abcdef0123456789abcdef0123456789"); 40 }, 41 type: "GET", 42 url: $questionUrl, 43 async: true, 44 dataType: "json", 45 success:function(json){ 46 $ttl = json.question['title']; 47 $body = json.question['body']; 48 $('.p-questionBox').children().empty(); 49 $('.p-questionBox__ttl').append($ttl); 50 $('.p-questionBox__markdown').append($body); 51 $('.p-btnAnswer').removeClass('is-hidden'); 52>'); 53 } 54 }); 55 })); 56 } 57 }); 58 59}); 60
不足している情報などございましたら、ご指摘ください。
よろしくお願いいたします。
回答2件
0
ベストアンサー
いくつか試してみました。
$ curl -X GET -H "Authorization: Bearer 0000000aaaaaaaaaaaa" https://teratail.com/api/v1/questions?limit=2 % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 1116 100 1116 0 0 2584 0 --:--:-- --:--:-- --:--:-- 2589 { "meta": { "message": "success", "total_page": 15699, "page": 1, "limit": 2, "hit_num": 31397 }, （略）
こちらは問題なくリクエストが飛んできました。
次にフロントエンドのJavaScriptから取得を試みました
html
1<h1>test</h1> 2 3<script> 4var xhr = new XMLHttpRequest(); 5xhr.onreadystatechange = function(){ 6 if (this.readyState==4 && this.status==200) { 7 var r = this.response; 8 console.log(r); 9 } 10}; 11 12xhr.open('GET','https://teratail.com/api/v1/users/ikuwow/activities',true); 13xhr.setRequestHeader('Authorization', 'Bearer as8769843hhge6c5eb2af8e9c4d0basd4948487') // (1) 14// xhr.withCredentials = true; (2) 15xhr.send(); 16</script>
この場合以下のエラーが出ました。仰るとおり(1)をコメントアウトした状態では無事に取得できました。
XMLHttpRequest cannot load https://teratail.com/api/v1/users/ikuwow/activities. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8484' is therefore not allowed access. The response had HTTP status code 501.
また、いろいろいじっている過程で、(1)をコメントアウトして(2)のコメントアウトを解いたらまた違うエラーを見ることができました。
XMLHttpRequest cannot load https://teratail.com/api/v1/users/ikuwow/activities. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:8484' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute.
Access-Control-Allow-Originが*という不特性多数からアクセス可能なホストでは、セキュアな情報と送れない、ということです。
というわけで気づいたのが、そもそもアクセストークンというセキュアにする情報をユーザーサイドのJavaScriptに渡してはいけないということです。フロントエンドJavaScriptで情報をほんとうに暗号化したまま送ることは不可能なので、バックエンドでAPIとの通信をするなど別の方法を取る必要がある気がします。
（XMLHttpRequestの仕様を詳細を調べずに回答しているので、もし間違いなどあれば間違いなどあれば補足していただけると幸いです）
投稿2016/04/07 11:34
総合スコア462
サーバーサイドで認証を行わなければいけないということだったのですね。
貴重な回答をいただきありがとうございます。
具体的にサーバサイドでどのように認証を行うのですか？
↑すいません、質問を立てます。
0
エラーメッセージからすると Ajax のクロスドメイン問題でしょうか。
下記のサイトにいくつかの回避方法が、説明されているので、ご確認ください。
投稿2016/04/04 03:24
総合スコア25171
ご回答頂きありがとうございます。URLを参考にさせていただきました。
【1. 'Access-Control-Allow-Origin' ヘッダを付与】と【2. JSONP で行う】に関しては、API提供側で対応される必要があるため回避することができませんでした。
【3. jquery.xdomainajax.js を利用する】を試みてみましたが、こちらもエラー内容に変化が無く回避することができませんでした。
貴重なアドバイスをありがとうございました。
あなたの回答
tips
プレビュー
