A irmã de teste levantou um bug novamente enquanto eu estava fora do trabalho! Por que você tem várias solicitações de opções no front-end?

A irmã de teste mencionou um bug, por que você tem uma solicitação de opções?

1 O silêncio antes de sair do trabalho

Quase saindo do trabalho, a irmã do teste me pediu outro bug. Veja, eu fiz isso uma vez. networkPor que há dois pedidos?

Fiquei surpreso: "Impossível! Meu código chama a interface de backend uma vez, como pode haver duas solicitações!". Abra a captura de tela e dê uma olhada: vários optionspedidos.

Expliquei calmamente: “Não se preocupe, é uma solicitação de comprovação enviada pelo navegador por padrão”.

Mas a irmã mais velha do teste parece ainda muito persistente: “Então isso definitivamente não é possível. Por que você tem que solicitar duas vezes quando solicita uma vez?

“Md, você é tão teimoso, então não vou sair do trabalho e explicarei isso para você em uma hora extra!”

Existem dois tipos de solicitações HTTP:

• pedido simples
• solicitação não simples

2 pedidos simples

2.1 Condições

• Método de solicitação: HEAD, GET,POST

• O cabeçalho só pode conter os seguintes campos de cabeçalho de solicitação:

  • Accept

  • Accept-Language

  • Content-Language

  • O valor do tipo de mídia referido por Content-Type é limitado a um dos três seguintes

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

2.2 Diferentes métodos de processamento de navegadores

Solicitação simples, se a solicitação for entre domínios, o navegador permitirá o envio da solicitação. O navegador enviará corsuma solicitação e a executará origin. Neste momento, não importa o que o servidor retorne, o navegador irá interceptar o retorno e verificar se responseele foi retornado :headerAccess-Control-Allow-Origin

• O valor desta informação de cabeçalho geralmente é o valor da solicitação Origin, o que significa que a solicitação desta fonte pode indicar que o recurso é compartilhado e pode ser obtido
• Se Origino valor da informação do cabeçalho for "*" (indicando que solicitações de qualquer fonte são permitidas), mas neste caso precisa ser usado com cautela, pois apresenta riscos de segurança
• Se não houver essas informações de cabeçalho, significa que o compartilhamento de recursos não foi habilitado no servidor e o navegador considerará que a solicitação falhou ao encerrar a solicitação e reportará um erro.

3 Solicitações não simples

Enquanto as condições de uma solicitação simples não forem atendidas, trata-se de uma solicitação não simples.

Para emitir uma solicitação não simples cors, o navegador fará uma httpsolicitação de consulta (solicitação de comprovação), ou seja options,. optionsAs solicitações são tratadas como solicitações simples.

Por que fazer um optionspedido?

Verifique se o servidor oferece suporte a solicitações entre domínios e confirme a segurança da solicitação real . A solicitação de simulação visa proteger a segurança do cliente e evitar que sites não confiáveis ​​usem o navegador do usuário para enviar solicitações maliciosas a outros sites. Além dos origincampos de transporte, o cabeçalho da solicitação de comprovação também contém dois campos especiais:

• Access-Control-Request-MethodHTTP: Informa ao servidor o método usado para a solicitação real

• Access-Control-Request-Headers: Informa ao servidor o campo de cabeçalho personalizado transportado pela solicitação 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 pode ser visto na mensagem acima, por meio OPTIONSda solicitação, o navegador decide se ela precisa ser enviada de acordo com os parâmetros de solicitação usados ​​​​acima, para que o servidor possa responder se é aceitável enviar a solicitação com os parâmetros reais da solicitação.

- Access-Control-Request-Methodinforma ao servidor que a solicitação real será feita usando POSTo método

Access-Control-Request-HeadersInforma ao servidor que a solicitação real conterá dois campos de cabeçalho de solicitação personalizados: X-PINGOTHERe Content-Type. Com base nisso, o servidor decide se a solicitação real é permitida.

Quando a solicitação de simulação é acionada?

1. Ao enviar uma solicitação entre domínios, o cabeçalho da solicitação contém algumas informações não simples do cabeçalho da solicitação, como cabeçalho personalizado (cabeçalho personalizado)
2. Ao enviar solicitações entre domínios, métodos de solicitação como PUT, DELETE, CONNECT, OPTIONS, TRACE e PATCH são usados

“Irmã, você entendeu? Então isso não é um bug, desligue-o rapidamente!

A irmã mais velha deixou escapar um olhar claro, ok?

4 casos

Desta vez, a irmã mais velha do teste finalmente fechou o bug de forma duvidosa.

5 Se não houver irmã de teste no mundo

Eu disse e se! Seu chefe de teste disse: não entendi o que você disse, não me importo, de qualquer forma, o que quero ver agora é que só existe uma solicitação de rede no navegador, você pode descobrir sozinho, vou sair o bug aqui, você mesmo cuida disso!

como! Para garantir a segurança, os fabricantes de navegadores proíbem o uso de domínios cruzados, mas no final os programadores arcam com o custo de todas as otimizações!