preface
The test gave me a bug, saying why two requests in the network are in one operation.
My first reaction was...
Walking over and looking, it turned out to be an additional options request.
"You don't have to worry about this, this is a preflight request sent by the browser by default." But the test is very persistent: "This is definitely not possible, it is obviously a request, why twice?" “。
"It's quite stubborn, then I'll explain it to you."
overview
When a resource requests a resource from a different domain, protocol, or port than the server on which the resource itself resides, the resource initiates a cross-origin HTTP request.
For security reasons, browsers restrict cross-origin HTTP requests made from within scripts to HTTP resources only from the same domain where the application is loaded, unless CORS header files are used.
For the word browser restriction, it is important to explain: it is not the browser that restricts the launch of cross-site requests, it is that cross-site requests can be initiated normally, but the return result is blocked by the browser.
CORS overview
The cross-origin resource sharing standard adds a new set of HTTP header fields that allow the server to declare which origin servers have access to which resources through the browser.
In addition, the specification requires that for HTTP request methods that may have side effects on server data (especially HTTP requests other than GET, or with certain MIME types of POST requests), the browser must first initiate a preflight request using the OPTIONS method to know whether the server allows the cross-origin request.
The server confirms that it allows it before initiating the actual HTTP request. In the return of the preflight request, the server can also notify the client whether it needs to carry credentials (such as cookies and HTTP authentication related data).
Simple request
A request that does not trigger a CORS preflight is called a simple request, and only those that meet all of the following conditions are considered simple requests.
- Use one of these methods
- Only the following security header fields are used, and no other header fields can be artificially set
- AcceptAccept-Language
- Content-Language
- Content-Type is limited to the following three types of text/plain, multipart/form-data, application/x-www-form-urlencoded
Preflight requests
A request to be prequalified requires that a preflight request must first be made to the server using the OPTIONS method to know whether the server allows the actual request. The use of Preflight Requests prevents cross-domain requests from having an unintended impact on the server's user data.
The following request will trigger the preflight request, in fact, it is not a simple request that will trigger the preflight, so you don't need to remember so much.
- Methods are used
- Artificially set other header fields within the non-specified area, refer to the set of security fields simply requested above, and pay special attention to the type of Content-Type.
The following is an example of initiating a preflight request
The origin of the request is different from the host of the requested server, and according to the above conditions, the preflight is triggered
The request is accompanied by an identity credential -> cookies
If the withCredentials flag is set to true when initiating the request to send a cookie to the server, but if the server-side response does not contain Access-Control-Allow-Credentials: true, the browser will not return the response to the sender of the request.
Complete request process
Pay attention and don't get lost.
Do clean and pure technical sharing, have words to walk up in the comment area.