Chrome デベロッパーツールを使用して HTTP リクエストを送信する質問する

Question

以来、フェッチAPIChrome (および他のほとんどのブラウザ) でサポートされているため、devtools コンソールから HTTP リクエストを送信するのが非常に簡単になりました。

たとえば、JSON ファイルを取得するには:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(console.log)

または、新しいリソースをPOST するには:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
.then(res => res.json())
.then(console.log)

Chrome Devtools は、実際には新しい async/await 構文もサポートしています (ただし、await は通常、async 関数内でのみ使用できます)。

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())

あなたのリクエストは、同一生成元ポリシーブラウザ内の他の HTTP リクエストと同様に、クロスオリジンリクエストを避けるか、サーバーがリクエストを許可する CORS ヘッダーを設定するようにしてください。

プラグインの使用（古い回答）

以前投稿した提案に加えて、郵便配達員Chrome 用のプラグインは非常にうまく機能します。ヘッダーと URL パラメータを設定したり、HTTP 認証を使用したり、頻繁に実行するリクエストを保存したりすることができます。

Answer 1