jQuery AJAX POST リクエストの「Access-Control-Request-Headers」ヘッダーにカスタム ヘッダーを設定しないようにするにはどうすればよいですか?

jQuery を使用した AJAX POST リクエストの複雑なヘッダーの処理

背景:

jQuery を使用した AJAX POST リクエストでは、カスタム ヘッダーサーバーとの通信を強化するために追加できます。課題は、カスタム ヘッダーが、意図されたヘッダーではなく、あまり一般的ではない「Access-Control-Request-Headers」ヘッダーに追加されていることを観察することにあります。

説明:

ブラウザが AJAX リクエストを送信元のドメインとは異なるドメインに送信する場合、ブラウザはまず「プリフライト」リクエスト (OPTIONS メソッド) を送信して、サーバーがカスタム ヘッダーを許可しているかどうかを確認します。これは、クロスサイト スクリプティング (XSS) 攻撃を防ぐために行われます。

このプリフライト リクエストの一部として、ブラウザーは「Access-Control-Request-Headers」ヘッダーを追加します。これには、カスタム ヘッダーがリストされています。実際のリクエストで送信されます。サーバーは、「204 No Content」ステータス コードと、どのカスタム ヘッダーが許可されるかを指定する「Access-Control-Allow-Headers」ヘッダーで応答します。

解決策:

この動作を回避し、POST リクエストでカスタム ヘッダーを直接設定するには、jQuery Ajax 呼び出しの "beforeSend" 関数でヘッダーを明示的に設定できます。これにより、リクエストが送信される前にヘッダーがリクエストに追加され、プリフライト リクエスト プロセスがバイパスされます。

jQuery Ajax 呼び出しでヘッダーを設定する方法の例を次に示します。

$.ajax({
  type: "POST",
  beforeSend: function(request) {
    request.setRequestHeader("Authority", authorizationToken);
  },
  url: "entities",
  data: "json=" + escape(JSON.stringify(createRequestObject)),
  processData: false,
  success: function(msg) {
    $("#results").append("The result =" + StringifyPretty(msg));
  }
});

「beforeSend」関数でヘッダーを設定すると、jQuery は実際の POST リクエストに「Authority」ヘッダーを追加し、カスタム ヘッダーを渡して期待されるサーバー応答を受け取ることができるようになります。

以上がjQuery AJAX POST リクエストの「Access-Control-Request-Headers」ヘッダーにカスタム ヘッダーを設定しないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。