LoginSignup
1
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-09-19

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

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

この接続は保護されています_と_Google_Chrome_silently_blocks_mixed_content___-_Google_Chrome_Community-2.png

設定.png

スクリプト

以下のスクリプトを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();

以上です。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1