The test sister raised a bug again while I was off work! Why do you have multiple options requests on the front end?

The test sister mentioned a bug, why do you have an options request?

1 The silence before get off work

Just about to get off work, the test sister asked me another one bug. You see, I did this once. networkWhy are there two requests?

I was startled, "Impossible! My code calls the backend interface once, how can there be two requests!". Open her screenshot and take a look: multiple optionsrequests.

I calmly explained: "Don't worry about it, it's a preflight request sent by the browser by default."

But the big sister of the test seems to be still very persistent: "Then this is definitely not possible. Why do you have to request twice when you request it once? Doesn't this increase the pressure on the server?"

"Md, you're so stubborn, so I won't be off work, and I'll explain it to you in an extra hour!"

There are two types of HTTP requests:

• simple request
• non simple request

2 simple requests

2.1 Conditions

• Request method: HEAD, GET,POST

• The header can only contain the following request header fields:

  • Accept

  • Accept-Language

  • Content-Language

  • The media type value referred to by Content-Type is limited to one of the following three

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

2.2 Different processing methods of browsers

Simple request, if the request is cross-domain, the browser will allow the request to be sent. The browser will send corsa request and carry it origin. At this time, no matter what the server returns, the browser will intercept the return and check whether responseit is returned :headerAccess-Control-Allow-Origin

• The value of this header information is usually the value of the request Origin, which means that the request from this source is allowed to indicate that the resource is shared and can be obtained
• If Originthe value of the header information is "*" (indicating that requests from any source are allowed), but in this case it needs to be used with caution, because it has security risks
• If there is no such header information, it means that resource sharing has not been enabled on the server, and the browser will consider that the request failed to terminate the request and report an error.

3 Non-simple requests

As long as the conditions of a simple request are not met, it is a non-simple request.

To issue a non-simple corsrequest, the browser will do a httpquery request (preflight request) ie options. optionsRequests are handled as simple requests.

Why make a optionsrequest?

Check whether the server supports cross-domain requests, and confirm the security of the actual request . The preflight request is to protect the security of the client and prevent untrusted websites from using the user's browser to send malicious requests to other websites. In addition to carrying originfields, the preflight request header also contains two special fields:

• Access-Control-Request-MethodHTTP: Inform the server of the method used for the actual request

• Access-Control-Request-Headers: Inform the server of the custom header field carried by the actual request

like:

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

As you can see from the above message, using OPTIONSthe request, the browser decides whether it needs to be sent according to the request parameters used above, so that the server can respond whether it is acceptable to send the request with the actual request parameters.

- Access-Control-Request-Methodtells the server that the actual request will be made using POSTthe method

Access-Control-Request-HeadersInforms the server that the actual request will carry two custom request header fields: X-PINGOTHERand Content-Type. Based on this, the server decides whether the actual request is allowed.

When is the preflight request triggered?

1. When sending a cross-domain request, the request header contains some non-simple request header information, such as custom header (custom header)
2. When sending cross-domain requests, request methods such as PUT, DELETE, CONNECT, OPTIONS, TRACE, and PATCH are used

"Sister, do you understand? So this is not a bug, turn it off quickly!"

The elder sister leaked a clear look, okay?

4 cases

This time, the big sister of the test finally closed the bug dubiously.

5 If there is no test sister in the world

I said what if! Your test boss said: I don’t understand what you said, I don’t care, anyway, what I want to see now is that there is only one network request in the browser, you can figure it out, I will leave the bug here, You handle it yourself!

like! In order to ensure security, browser manufacturers prohibit cross-domain, but in the end programmers bear the cost of all optimizations!