La sœur test a encore soulevé un bug pendant que j'étais en arrêt de travail ! Pourquoi avez-vous plusieurs demandes d’options en amont ?

La sœur test a mentionné un bug, pourquoi avez-vous une demande d'options ?

1 Le silence avant de quitter le travail

Juste sur le point de quitter le travail, la sœur test m'en a demandé une autre bug. Vous voyez, je l'ai fait une fois. networkPourquoi y a-t-il deux demandes ?

J'ai été surpris : "Impossible ! Mon code appelle l'interface backend une fois, comment peut-il y avoir deux requêtes !". Ouvrez sa capture d'écran et jetez un œil : plusieurs optionsdemandes.

J'ai calmement expliqué : "Ne vous inquiétez pas, c'est une requête de contrôle en amont envoyée par le navigateur par défaut."

Mais la grande sœur du test semble toujours très persistante : "Alors ce n'est définitivement pas possible. Pourquoi faut-il demander deux fois alors qu'on le demande une fois ? Cela n'augmente-t-il pas la pression sur le serveur ?"

"Md, tu es tellement têtu, donc je ne m'arrêterai pas du travail, et je t'expliquerai dans une heure supplémentaire !"

Il existe deux types de requêtes HTTP :

• simple demande
• demande pas simple

2 demandes simples

2.1 Conditions

• Méthode de requête : HEAD, GET,POST

• L'en-tête ne peut contenir que les champs d'en-tête de requête suivants :

  • Accept

  • Accept-Language

  • Content-Language

  • La valeur du type de média référencée par Content-Type est limitée à l'un des trois suivants

    • text/plain
    • multipart/form-data
    • application/x-www-form-urlencoded

2.2 Différentes méthodes de traitement des navigateurs

Requête simple, si la requête est cross-domaine, le navigateur autorisera l'envoi de la requête. Le navigateur enverra corsune requête et la portera origin. A ce moment, peu importe ce que renvoie le serveur, le navigateur interceptera le retour et vérifiera responses'il headerest renvoyé Access-Control-Allow-Origin:

• La valeur de ces informations d'en-tête est généralement la valeur de la requête Origin, ce qui signifie que la requête de cette source est autorisée à indiquer que la ressource est partagée et peut être obtenue.
• Si Originla valeur des informations d'en-tête est "*" (indiquant que les requêtes provenant de n'importe quelle source sont autorisées), mais dans ce cas, elles doivent être utilisées avec prudence, car elles présentent des risques de sécurité.
• S'il n'y a pas de telles informations d'en-tête, cela signifie que le partage de ressources n'a pas été activé sur le serveur, et le navigateur considérera que la requête n'a pas réussi à terminer la requête et signalera une erreur.

3 demandes non simples

Tant que les conditions d’une demande simple ne sont pas remplies, il s’agit d’une demande non simple.

Pour émettre une requête non simple cors, le navigateur effectuera une httprequête de requête (demande de contrôle en amont), c'est-à-dire options. optionsLes demandes sont traitées comme de simples demandes.

Pourquoi faire une optionsdemande ?

Vérifiez si le serveur prend en charge les requêtes inter-domaines et confirmez la sécurité de la requête réelle . La demande de contrôle en amont vise à protéger la sécurité du client et à empêcher les sites Web non fiables d'utiliser le navigateur de l'utilisateur pour envoyer des demandes malveillantes à d'autres sites Web. En plus des originchamps de transport, l'en-tête de la demande de contrôle en amont contient également deux champs spéciaux :

• Access-Control-Request-MethodHTTP: Informer le serveur de la méthode utilisée pour la requête réelle

• Access-Control-Request-Headers: Informer le serveur du champ d'en-tête personnalisé porté par la requête réelle

comme:

OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

Comme le montre le message ci-dessus, en utilisant OPTIONSla requête, le navigateur décide si elle doit être envoyée en fonction des paramètres de requête utilisés ci-dessus, afin que le serveur puisse répondre s'il est acceptable d'envoyer la requête avec les paramètres de requête réels.

- Access-Control-Request-Methodindique au serveur que la requête réelle sera effectuée en utilisant POSTla méthode

Access-Control-Request-HeadersInforme le serveur que la requête réelle comportera deux champs d'en-tête de requête personnalisés : X-PINGOTHERet Content-Type. Sur cette base, le serveur décide si la demande réelle est autorisée.

Quand la demande de contrôle en amont est-elle déclenchée ?

1. Lors de l'envoi d'une requête inter-domaines, l'en-tête de la requête contient des informations d'en-tête de requête non simples, telles qu'un en-tête personnalisé (en-tête personnalisé)
2. Lors de l'envoi de requêtes inter-domaines, des méthodes de requête telles que PUT, DELETE, CONNECT, OPTIONS, TRACE et PATCH sont utilisées

"Ma sœur, tu comprends ? Alors ce n'est pas un bug, éteint-le vite !"

La sœur aînée a jeté un regard clair, d'accord ?

4 cas

Cette fois, la grande sœur du test a finalement fermé le bug de manière douteuse.

5 S'il n'y a pas de sœur test dans le monde

J'ai dit et si ! Votre responsable de test a dit : Je ne comprends pas ce que vous avez dit, je m'en fiche, de toute façon, ce que je veux voir maintenant, c'est qu'il n'y a qu'une seule requête réseau dans le navigateur, vous pouvez la découvrir vous-même, je vais partir le bug ici, vous le gérez vous-même !

comme! Afin de garantir la sécurité, les fabricants de navigateurs interdisent le cross-domain, mais au final, les programmeurs supportent le coût de toutes les optimisations !