AJAX リクエスト

`IncomingRequest::isAJAX()` メソッドは、`X-Requested-With` ヘッダーを使用して、リクエストが XHR なのか通常のなのかを判別します。しかし、最新の JavaScript 実装（例：fetch）では、このヘッダーがリクエストと一緒に送信されなくなりました。そのため、`IncomingRequest::isAJAX()` の使用は信頼性が低くなります。なぜなら、このヘッダーがないと、リクエストが XHR かどうかを判別できないからです。

この問題を回避するための、（これまでのところ）最も効率的な解決策は、リクエストヘッダーを手動で定義し、情報をサーバーに強制的に送信することです。これにより、サーバーはリクエストが XHR であることを識別できます。

Fetch API やその他の JavaScript ライブラリで `X-Requested-With` ヘッダーを強制的に送信する方法は次のとおりです。

Fetch API 

fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-Requested-With": "XMLHttpRequest"
    }
});

jQuery 

たとえば、jQuery のようなライブラリの場合、公式ドキュメントによると、すべてのリクエスト `$.ajax()` の標準ヘッダーであるため、このヘッダーの送信を明示的に行う必要はありません。それでも、リスクを冒さずに送信を強制したい場合は、次のようにしてください。

$.ajax({
    url: "your url",
    headers: {'X-Requested-With': 'XMLHttpRequest'}
});

VueJS 

VueJS では、このタイプの要求に Axios を使用している限り、`created` 関数に次のコードを追加するだけです。

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

React 

axios.get("your url", {headers: {'Content-Type': 'application/json'}})

htmx 

ajax-header 拡張機能を使用できます。

<body hx-ext="ajax-header">
...
</body>

AJAX リクエスト

Fetch API

jQuery

VueJS

React

htmx

Fetch API 

jQuery 

VueJS 

React 

htmx 