vue définit le référent d'en-tête de requête

Vue est un framework JavaScript populaire qui permet aux développeurs de créer des interfaces utilisateur interactives et des applications d'une seule page. Dans Vue, la définition du référent d'en-tête de requête HTTP est très importante, en particulier lorsque la sécurité est requise. Cet article expliquera comment utiliser Vue pour définir le référent d'en-tête de requête afin de garantir la sécurité de l'application.

L'en-tête de requête HTTP contient des métadonnées, qui permettent au serveur de comprendre le type de ressource demandé par le client, la méthode de requête et la source de la requête. Le référent est l'une des métadonnées qui enregistre l'adresse source de la requête HTTP, c'est-à-dire qu'il indique au serveur quel site Web ou quel lien de page pointe vers la requête en cours.

Dans de nombreux cas, il est très important d'indiquer au serveur l'adresse source de la requête. Par exemple, lorsqu'un utilisateur se connecte à un site Web, le serveur doit savoir de quelle page provient la demande pour s'assurer que le nom d'utilisateur et le mot de passe saisis par l'utilisateur proviennent du bon site Web.

Voici les étapes à suivre pour définir l'en-tête de requête du référent dans une application Vue :

1. Installer Axios

#🎜🎜 #Axios Il s'agit d'une bibliothèque HTTP basée sur Promise pour l'envoi de requêtes HTTP et le traitement des réponses HTTP. Il s'agit de l'une des bibliothèques HTTP les plus populaires pour Vue et elle prend en charge la définition des en-têtes de requête HTTP.

Pour utiliser Axios, nous devons l'installer dans notre application Vue. Nous pouvons utiliser npm pour installer Axios comme suit :

npm install axios --save

Importer Axios dans le composant Vue

Utiliser Axios dans le composant Vue, il peut être importé dans le composant à l’aide de la commande import. Par exemple :

import axios from 'axios'

Cela extraira Axios et le stockera dans une variable afin que nous puissions l'utiliser dans notre composant.

Définir l'en-tête de la requête du référent dans Axios

Pour définir l'en-tête de la requête du référent, nous pouvons utiliser l'attribut interceptors d'Axios pour intercepter les requêtes HTTP . interceptors est un objet intercepteur qui dispose de deux méthodes, l'une pour intercepter les requêtes et l'autre pour intercepter les réponses. Nous devons définir l'en-tête de la demande du référent dans l'intercepteur de demande.

Voici le code permettant de définir l'en-tête de la requête du référent :

axios.interceptors.request.use(config => {
  config.headers.referer = 'http://example.com'
  return config
})

Dans le code ci-dessus, nous utilisons la méthode request.use pour intercepter toutes les requêtes HTTP et les transmettre une fonction de rappel pour gérer la demande. Dans la fonction de rappel, nous définissons la valeur de la propriété config.headers.referer sur « http://example.com ». Cela définira l'en-tête de la demande du référent sur « http://example.com ».

Notez que le code ci-dessus n'est qu'un exemple. Dans les applications pratiques, nous devons utiliser la véritable adresse du site Web pour définir l’en-tête de la demande du référent.

Envoyez une requête HTTP et vérifiez l'en-tête de la demande du référent

Maintenant que nous avons défini l'en-tête de la demande du référent dans Axios, nous pouvons envoyer un Requête HTTP et vérifiez si l'en-tête de la requête du référent est défini.

Voici l'exemple de code :

axios.get('http://example.com/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

Dans le code ci-dessus, nous utilisons Axios pour envoyer une requête GET à l'adresse http://example.com/api/data et les données de réponse sont enregistrées dans la console. Si Axios envoie avec succès la requête HTTP et obtient une réponse, nous pouvons vérifier l'en-tête de la requête du référent dans les en-têtes de réponse. Si l'en-tête de demande du référent est défini correctement, nous pouvons voir les informations d'en-tête de réponse dans la console.

Summary

Définir l'en-tête de requête du référent dans une application Vue est très important car cela peut protéger notre application de certaines attaques courantes, telles que les attaques CSRF. Axios est une bibliothèque HTTP populaire qui nous permet de définir l'en-tête de requête du référent pour intercepter les requêtes HTTP à l'aide de l'intercepteur Axios. Pour définir l'en-tête de requête du référent, nous devons ajouter l'en-tête de requête à la propriété config.headers.referer et utiliser l'adresse réelle du site Web au lieu de « http://example.com » dans l'exemple. Enfin, nous devons envoyer une requête HTTP et vérifier si l'en-tête de la requête du référent est correctement défini.

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!