Google Chrome デベロッパーツールからAPIを叩く

2307 ワード
Chrome DeveloperTool api Chrome テキストリンク

なぜChromeでApi実行したかったか

ローカル開発環境でAPIを開発しており、CORSをクリアしているか試したかった。
HTTPの場合はブラウザでは混合コンテツとみなされ、ブロックされる。
事前に以下から許可しておく必要がある。

スクリプト

以下のスクリプトをconsoleタブで実行します。

api.js

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    console.log(this.responseText);
}
// 実行したいAPIを設定
xhr.open('GET', 'http://192.168.33.11:8000/api/v1/evaluate_routes');
// ヘッダーなどを付与する
xhr.setRequestHeader('Authorization', 'Bearer eyJ0eXAiOiJKV1QiLCJhbGc...');
xhr.send();

以上です。