AJAX 请求

The 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 中，你只需要在 created 函数中添加以下代码，只要你使用 Axios 进行这种类型的请求。

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 