AJAX 요청

IncomingRequest::isAJAX() 메서드는 요청이 XHR인지 일반 요청인지 판단하기 위해 X-Requested-With 헤더를 사용합니다. 그러나 최신 JavaScript 구현(예: fetch)은 더 이상 이 헤더를 요청과 함께 전송하지 않으므로, 이 헤더가 없으면 요청이 XHR인지 아닌지 판단할 수 없어 IncomingRequest::isAJAX() 사용의 신뢰성이 낮아집니다.

이 문제를 해결하는 가장 효율적인 방법(현재까지)은 요청 헤더를 수동으로 정의하여 해당 정보를 서버로 강제로 전송하는 것이며, 그러면 서버가 그 요청이 XHR임을 식별할 수 있습니다.

Here are common ways to send the X-Requested-With header in the Fetch API and other JavaScript libraries.

Fetch API 

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

Axios 

Axios는 기본적으로 X-Requested-With 헤더를 포함하지 않습니다. 전역으로 추가하려면 다음과 같이 하세요:

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

전역 기본값을 피하려면 대신 Axios 인스턴스를 만드세요:

const api = axios.create({
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    }
});

Vue.js 

Vue는 특정 HTTP 클라이언트를 요구하지 않습니다. Vue 앱에서 Axios를 사용한다면 앱 초기화 중이나 공유 API 모듈에서 Axios를 한 번만 설정하고, 그 설정을 전체 앱에서 재사용하세요.

React 

React는 내장 HTTP 클라이언트를 제공하지 않습니다. React 앱에서 Axios를 사용한다면 위의 공유 Axios 설정을 재사용하거나, 필요할 때 개별 요청에 대해 헤더를 설정하세요:

axios.get('your url', {
    headers: {
        'X-Requested-With': 'XMLHttpRequest'
    }
})

jQuery 

예를 들어 jQuery 같은 라이브러리에서는 이 헤더 전송을 명시적으로 지정할 필요가 없습니다. 공식 문서 에 따르면 $.ajax() 의 모든 요청에서 이 헤더는 표준으로 전송되기 때문입니다. 그래도 위험을 피하기 위해 강제로 전송하고 싶다면 다음과 같이 하세요:

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

htmx 

ajax-header 확장을 사용할 수 있습니다.

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

또는 hx-headers를 사용해 헤더를 수동으로 설정할 수 있습니다:

<button
    hx-post="/your-url"
    hx-headers='{"X-Requested-With": "XMLHttpRequest"}'>
    Send Request
</button>

AJAX 요청

Fetch API

Axios

Vue.js

React

jQuery

htmx