【jQuery】GETリクエストなのにOPTIONSリクエストが送信される？その原因と解決策

2024-04-20

jQueryでGETリクエストではなくOPTIONSリクエストが送信される理由

CORSは、異なるオリジンのWebページ間でリソースを共有するためのセキュリティ対策です。異なるオリジンからのリクエストは、悪意のあるコードを実行したり、データに不正アクセスしたりする可能性があるため、ブラウザは事前にサーバーに確認を行います。

この確認のために送信されるのがOPTIONSリクエストです。OPTIONSリクエストには、実際のGETリクエストで送信されるヘッダー情報が含まれており、サーバーはこの情報に基づいてリクエストを許可するか判断します。

OPTIONSリクエストが送信される条件

以下のいずれかに該当する場合、GETリクエストの前にOPTIONSリクエストが送信されます。

リクエストヘッダーにカスタムヘッダーが含まれている
Content-Typeヘッダーの値が「application/json」など、デフォルト以外の値になっている
withCredentialsプロパティがtrueに設定されている
XMLHttpRequestUploadオブジェクトにイベントリスナーが登録されている
ReadableStreamオブジェクトがリクエストで使用されている

OPTIONSリクエストを回避するには、以下の方法があります。

カスタムヘッダーや特殊なContent-Typeヘッダーの使用を避ける

また、jQueryを使用している場合は、$.ajax()メソッドのxhrFieldsオプションを使用することで、OPTIONSリクエストの送信を制御できます。

$.ajax({
  url: 'https://example.com/data.json',
  xhrFields: {
    withCredentials: false
  },
  success: function(data) {
    console.log(data);
  }
});

補足

OPTIONSリクエストは、GETリクエストとは別に送信されるため、ネットワークのパフォーマンスに影響を与える可能性があります。
サーバー側でCORSヘッダーを適切に設定することで、OPTIONSリクエストを許可または禁止することができます。

jQueryでOPTIONSリクエストを送信するサンプルコード

$.ajax({
  url: 'https://example.com/data.json',
  method: 'OPTIONS',
  success: function(headers) {
    console.log(headers);
  }
});

このコードを実行すると、OPTIONSリクエストが送信され、レスポンスヘッダーがコンソールに出力されます。

ポイント

methodオプションを'OPTIONS'に設定することで、OPTIONSリクエストを送信するように指定します。
successコールバック関数には、OPTIONSリクエストのレスポンスヘッダーが渡されます。

このコードは、OPTIONSリクエストのレスポンスヘッダーを確認するだけのものです。実際にデータを取得するには、別の方法が必要です。
OPTIONSリクエストのレスポンスヘッダーには、サーバーが許可するリクエストメソッドやヘッダー情報などが含まれています。

jQuery以外でOPTIONSリクエストを送信する方法

XMLHttpRequest

var request = new XMLHttpRequest();
request.open('OPTIONS', 'https://example.com/data.json');
request.onload = function() {
  if (request.status >= 200 && request.status < 300) {
    console.log(request.responseText);
  } else {
    console.error('エラーが発生しました：', request.statusText);
  }
};
request.send();

Fetch API

fetch('https://example.com/data.json', {
  method: 'OPTIONS'
})
  .then(function(response) {
    console.log(response.headers);
  })
  .catch(function(error) {
    console.error('エラーが発生しました：', error);
  });

axios

axios.options('https://example.com/data.json')
  .then(function (response) {
    console.log(response.headers);
  })
  .catch(function (error) {
    console.error('エラーが発生しました：', error);
  });

これらのコードは、いずれもjQueryの$.ajax()メソッドとほぼ同じように動作します。