AJAX請(qǐng)求

IncomingRequest::isAJAX() 方法使用了 X-Requested-With 請(qǐng)求頭來確定一個(gè)請(qǐng)求是否是XHR(XML Http Request)或者是一個(gè)正常的請(qǐng)求。 然后最新的JavaScript實(shí)現(xiàn)（例如fetch方法）中不再隨著請(qǐng)求發(fā)送這個(gè)頭，因此使用 IncomingRequest::isAJAX() 就不那么可靠了，因?yàn)闆]有這個(gè)頭，該方法就不能識(shí)別一個(gè)請(qǐng)求是否是一個(gè)XHR。

為了解決這個(gè)問題，最有效的解決方式（至今）就是人為定義一個(gè)請(qǐng)求頭，迫使這個(gè)請(qǐng)求信息發(fā)送的服務(wù)器從而識(shí)別這個(gè)請(qǐng)求是否是一個(gè)XHR。

以下就是如何迫使在Fetch API和其他JavaScript庫中發(fā)送 X-Requested-With 請(qǐng)求頭。

Fetch API

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

jQuery

對(duì)于類似jQuery之類的庫來說，不需要額外發(fā)送這個(gè)頭，因?yàn)楦鶕?jù) 官方文檔 ，對(duì)于所有 $.ajax() 請(qǐng)求來說，這都是一個(gè)標(biāo)準(zhǔn)頭。 但是如果你還是不想擔(dān)風(fēng)險(xiǎn)并強(qiáng)制發(fā)送這個(gè)頭，就像下面這樣做吧:

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

VueJS

在VueJS中你只需要在 created 函數(shù)中增加以下代碼，只要你在這類請(qǐng)求時(shí)使用Axios:

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

React

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