CORS のプリフライト・リクエストを観察する

1. このページの目的

CORS の preflightリクエストの動作を観察する。

2. 方法

Fetch API で外部ドメインにリクエストを送信するのであるば、preflight を発生させるために Content-Type: application/json フィールドをセットしたリクエストを送信する。

ブラウザの開発者ツールで、そのやり取りを観察する。

Chrome の DevTools を使う場合は、chrome://flags/#out-of-blink-cors というフラグを無効にしないと [Network]パネルに preflight リクエストが表示されないので注意。

サーバー側のコード（抜粋）

リクエストを受け付ける側(Server)には、Glitch を使っている。
ということで、技術的には Express が利用されている。
リクエストを許可するようにいくつかのヘッダフィールドを返している。

app.use(function(req, res, next) {
  // misc.laboradian.com からのアクセスを許可します
  res.header("Access-Control-Allow-Origin", "https://misc.laboradian.com");
  // Content-Type フィールドを許可します
  res.header("Access-Control-Allow-Headers", "Content-Type");
  next();
});

app.get("/cors-preflight-test.json", function(request, response) {
  // JSONファイルを返します
  response.sendFile(__dirname + "/views/cors-preflight-test.json");
});

クライアント側のコード（抜粋）

本ページがクライアント側になる。
Fetch API で JSONを取得するリクエストを送る。

document.querySelector('#btn1').addEventListener('click', function() {

  const myHeaders = new Headers();
  // Content-Type に application/json をセットします
  myHeaders.append('Content-Type', 'application/json');

  const myInit = {
    method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default'
  };

  fetch('https://bramble-cors-test.glitch.me/cors-preflight-test.json', myInit)
    .then(function(response) {
      if(response.ok) {
        console.log('response OK');
        return response.json();
      } else {
        console.log('response NOT OK');
        throw new Error('Network response was not ok.');
      }
    })
    .then(function(myJson) {
      console.log(JSON.stringify(myJson));
    })
    .catch(function(error) {
      console.log('There has been a problem with your fetch operation: ', error.message);
    })
  ;

});