JavaScriptにおけるAJAXリクエストのCORSポリシー

AJAXを通じて他のサイトへのリクエストを（cross-origin requests）安易に行うことはできません。 このようなリクエストはCORSポリシーによって規制されています。 簡単に言うと、このポリシーでは、リクエストを送信する先のサイトがそれに応答することに同意する必要があります。 そのためには、適切なHTTPヘッダーを返さなければなりません。

実際に試してみましょう。 異なるポートで2つのテストサーバーを起動します。1つ目を 3001ポート、2つ目を3002ポートで起動します。 2つ目のサイトから1つ目のサイトへAJAXリクエストを送信してみましょう。

1つ目のサイトが以下のリクエストを受け付ける準備をしているとします：

test-http-server1/server.jsexport default {
  '/handler/': function({ body }) {
    console.log(body);
    return 'success';
  }
}

2つ目のサイトから1つ目のサイトへリクエストを送信します：

test-http-server2/public/client.jsbutton.addEventListener('click', function() {
  let promise = fetch('http://localhost:3001/handler/', {
    method: 'post',
    body: JSON.stringify([1, 2, 3, 4, 5]),
    headers: {
      'Content-Type': 'application/json',
    },
  });
});

結果として、リクエストは実行されず、ブラウザのコンソールにはCORSポリシーに関連するエラーが表示されます。

リクエストが実行されるためには、1つ目のサーバーが特別なHTTPヘッダーを返す必要があります。 それらを指定しましょう。そうすれば、2つ目のサイトからのリクエストが1つ目のサイトへ通るようになります：

test-http-server1/server.jsexport default {
  '/handler/': function({ body, resp }) {
    resp.setHeader('Access-Control-Allow-Origin', '*');
    resp.setHeader('Access-Control-Allow-Headers', '*');
    
    console.log(body);
    return 'success';
  }
}