¡La hermana de prueba volvió a mencionar un error mientras yo no estaba en el trabajo! ¿Por qué tiene múltiples solicitudes de opciones en el front-end?

La hermana de prueba mencionó un error, ¿por qué tienes una solicitud de opciones?

1 El silencio antes de salir del trabajo

A punto de salir del trabajo, la hermana de prueba me pidió otra bug. Verás, hice esto una vez. ¿ networkPor qué hay dos solicitudes?

Me sorprendí: "¡Imposible! Mi código llama a la interfaz de backend una vez, ¡cómo puede haber dos solicitudes!". Abra su captura de pantalla y eche un vistazo: múltiples optionssolicitudes.

Le expliqué con calma: "No se preocupe, es una solicitud de verificación previa enviada por el navegador de forma predeterminada".

Pero la hermana mayor de la prueba parece seguir siendo muy persistente: "Entonces esto definitivamente no es posible. ¿Por qué tienes que solicitar dos veces cuando lo solicitas una vez? ¿No aumenta esto la presión sobre el servidor?"

"¡Md, eres tan terco, así que no estaré fuera del trabajo y te lo explicaré en una hora más!"

Hay dos tipos de solicitudes HTTP:

• petición sencilla
• solicitud no simple

2 peticiones simples

2.1 Condiciones

• Método de solicitud: HEAD, GET,POST

• El encabezado solo puede contener los siguientes campos de encabezado de solicitud:

  • Accept

  • Accept-Language

  • Content-Language

  • El valor del tipo de medio al que hace referencia Content-Type está limitado a uno de los tres siguientes

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

2.2 Diferentes métodos de procesamiento de los navegadores

Solicitud simple, si la solicitud es entre dominios, el navegador permitirá que se envíe la solicitud. El navegador enviará corsuna solicitud y la llevará origin. En este momento, no importa lo que devuelva el servidor, el navegador interceptará el retorno y comprobará si responsese devuelve :headerAccess-Control-Allow-Origin

• El valor de esta información de encabezado suele ser el valor de la solicitud Origin, lo que significa que la solicitud de esta fuente puede indicar que el recurso se comparte y se puede obtener.
• Si Originel valor de la información del encabezado es "*" (lo que indica que se permiten solicitudes de cualquier fuente), pero en este caso debe usarse con precaución porque tiene riesgos de seguridad.
• Si no existe dicha información de encabezado, significa que el uso compartido de recursos no se ha habilitado en el servidor y el navegador considerará que la solicitud no pudo finalizar la solicitud e informará un error.

3 solicitudes no simples

Mientras no se cumplan las condiciones de una solicitud simple, se trata de una solicitud no simple.

Para emitir una solicitud no simple cors, el navegador realizará una httpsolicitud de consulta (solicitud de verificación previa), es decir options. optionsLas solicitudes se manejan como solicitudes simples.

¿Por qué hacer una optionssolicitud?

Verifique si el servidor admite solicitudes entre dominios y confirme la seguridad de la solicitud real . La solicitud de verificación previa tiene como objetivo proteger la seguridad del cliente y evitar que sitios web que no son de confianza utilicen el navegador del usuario para enviar solicitudes maliciosas a otros sitios web. Además de originlos campos de transporte, el encabezado de solicitud de verificación previa también contiene dos campos especiales:

• Access-Control-Request-MethodHTTP: Informar al servidor del método utilizado para la solicitud real

• Access-Control-Request-Headers: Informa al servidor del campo de encabezado personalizado que contiene la solicitud real

como:

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

Como se puede ver en el mensaje anterior, al utilizar OPTIONSla solicitud, el navegador decide si es necesario enviarla de acuerdo con los parámetros de solicitud utilizados anteriormente, de modo que el servidor pueda responder si es aceptable enviar la solicitud con los parámetros de solicitud reales.

- Access-Control-Request-Methodle dice al servidor que la solicitud real se realizará utilizando POSTel método

Access-Control-Request-HeadersInforma al servidor que la solicitud real incluirá dos campos de encabezado de solicitud personalizados: X-PINGOTHERy Content-Type. En base a esto, el servidor decide si se permite la solicitud real.

¿Cuándo se activa la solicitud de verificación previa?

1. Al enviar una solicitud entre dominios, el encabezado de la solicitud contiene información del encabezado de la solicitud no simple, como el encabezado personalizado (encabezado personalizado)
2. Al enviar solicitudes entre dominios, se utilizan métodos de solicitud como PUT, DELETE, CONNECT, OPTIONS, TRACE y PATCH.

"Hermana, ¿entiendes? Entonces esto no es un error, ¡apágalo rápido!"

La hermana mayor dejó escapar una mirada clara, ¿de acuerdo?

4 casos

Esta vez, la hermana mayor de la prueba finalmente cerró el error con dudas.

5 Si no hay hermana de prueba en el mundo

¡Dije qué pasaría si! Tu jefe de prueba dijo: No entiendo lo que dijiste, no me importa, de todos modos, lo que quiero ver ahora es que solo hay una solicitud de red en el navegador, puedes resolverlo, dejaré el error aquí, ¡lo manejas tú mismo!

¡como! Para garantizar la seguridad, los fabricantes de navegadores prohíben el uso de dominios cruzados, pero al final, ¡los programadores corren con el costo de todas las optimizaciones!