Comment personnaliser les en-têtes de requête en JavaScript

Avec le développement rapide de la technologie Internet, les applications Web sont devenues aujourd’hui l’une des formes d’Internet les plus courantes. En tant que technologie de base du front-end des pages Web, JavaScript devient de plus en plus important. Parmi eux, l'essor de la technologie AJAX permet aux applications Web d'interagir avec les serveurs backend pour les données, et la page peut être mise à jour dynamiquement sans actualiser complètement la page. Cependant, dans certains cas particuliers, afin de répondre aux besoins de l'application, nous devons personnaliser certains en-têtes de requêtes spécifiques. À l'heure actuelle, les en-têtes de requêtes personnalisés JavaScript deviennent particulièrement importants.

1. Qu'est-ce qu'un en-tête de requête ?

Dans une application Web, lorsque le navigateur envoie une requête au serveur, la requête contiendra des informations supplémentaires sur la requête, appelées en-tête de requête et contient généralement le contenu suivant :

• Accepter : données prises en charge par le type de navigateur. Par exemple : Accepter : text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
• Referer : L'adresse source de la page demandée. Par exemple : Référent : http://www.example.com/index.html
• User-Agent : informations sur le logiciel client qui a initié la demande. Par exemple : User-Agent : Mozilla/5.0 (Windows NT 10.0 ; WOW64) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/87.0.4280.141 Safari/537.36

2. Pourquoi devez-vous personnaliser l'en-tête de la requête ?

Parfois, les applications Web nécessitent des en-têtes de requête spéciaux pour répondre à certains besoins spécifiques, tels que :

1. Demandes inter-domaines

Dans les requêtes inter-domaines, le serveur peut contrôler les autorisations via l'option Access-Control-Allow- En-tête de demande de paramètre Headers. Si vous devez ajouter des paramètres spéciaux à l'en-tête de la requête, vous devez personnaliser l'en-tête de la requête via JavaScript.

2. Restrictions IP

Certains serveurs imposeront des restrictions en fonction de l'adresse IP dans l'en-tête de la requête. Si nous souhaitons envoyer des requêtes via différentes adresses IP, nous devons personnaliser l'en-tête de la requête.

3. Paramètres de chargement des ressources

Certaines ressources nécessitent des paramètres spécifiques, tels que l'extraction des ressources, qui doivent être spécifiés via les en-têtes de requête.

3. Comment personnaliser les en-têtes de requête ?

En JavaScript, vous pouvez personnaliser l'en-tête de la requête via la méthode xhr.setRequestHeader(). Le code spécifique est le suivant :

let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.example.com/api', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
    console.log('请求成功');
};
xhr.send(JSON.stringify({name: 'Alice', age: 18}));

Dans le code ci-dessus, nous avons ajouté l'en-tête de requête Content-Type : application/json via la méthode xhr.setRequestHeader(), et envoyé des données au format JSON via la méthode send() {name : 'Alice', âge : 18}.

Dans certains cas, nous devons ajouter plusieurs paramètres, qui peuvent être ajoutés via la traversée. L'exemple de code est le suivant :

let data = {
    name: 'Alice',
    age: 18
};
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://www.example.com/api', true);
for (let key in data) {
    if (data.hasOwnProperty(key)) {
        xhr.setRequestHeader(key, data[key]);
    }
}
xhr.onload = function () {
    console.log('请求成功');
};
xhr.send();

IV. Résumé

En personnalisant les en-têtes de requête, nous pouvons répondre à certains besoins spécifiques et réaliser plus de fonctions d'applications Web. Cependant, lors de la définition d'en-têtes de requête personnalisés, nous devons faire attention à ne pas ajouter d'informations d'en-tête inutiles pour éviter des problèmes inutiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!