How Can I Add Custom HTTP Headers to Ajax Requests in JavaScript or jQuery?

Adding Custom HTTP Headers in Ajax Requests Using JavaScript or jQuery

In web development, it's often necessary to add custom HTTP headers to Ajax requests. Here's how to do it using JavaScript or jQuery:

Option 1: Add Header to Individual Request (jQuery)

For adding a custom header to a specific request using jQuery, assign it to the "headers" property within the $.ajax() function:

$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

Option 2: Set Default Header for All Requests (jQuery)

To set a default header for all Ajax requests, use the $.ajaxSetup() function with the "headers" property:

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

Subsequent $.ajax() calls will inherit this header unless explicitly overridden.

Option 3: Add Header to Every Request (beforeSend Hook)

You can also use the beforeSend hook with $.ajaxSetup() to add a header to every request:

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

This allows you to dynamically set headers before each request.

Important Note:

When using $.ajaxSetup(), it's crucial to remember that only the last set of headers and the last beforeSend callback will be executed if you call $.ajaxSetup() multiple times.

The above is the detailed content of How Can I Add Custom HTTP Headers to Ajax Requests in JavaScript or jQuery?. For more information, please follow other related articles on the PHP Chinese website!