Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to understand options requests". In daily operation, I believe many people have doubts about how to understand options requests. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the questions of "how to understand options requests"! Next, please follow the editor to study!

What is an options request

We can take a look at a description in MDN:

The OPTIONS method of ★ HTTP is used to obtain the communication options supported by the destination resource. The client can use the OPTIONS method for a specific URL or for the entire site (by setting the URL to "*"). "

To put it simply, you can use options requests to sniff out which request methods are supported on the corresponding server.

We usually do not initiate this request in the front end, but you can often see that the same request is initiated twice in the browser, as shown in the figure:

In fact, this is because it is initiated actively when the browser initiates a "complex request" in a cross-domain situation. The cross-domain sharing standard specification requires that for HTTP request methods that may have side effects on server data (especially HTTP requests other than GET, or with some MIME types of POST requests), browsers must first use the OPTIONS method to initiate a pre-check request (preflight request) to know whether the server allows the cross-domain request. The server confirms the permission before initiating the actual HTTP request.

Simple request and complex request

Some requests do not trigger CORS pre-check requests, which are generally called "simple requests", while requests that trigger pre-checks are called "complex requests".

Simple request

Request sent when the request method is GET, HEAD, or POST

The first field in the specification set is artificially set, such as Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width

The value of Content-Type is limited to one of the following three, that is, application/x-www-form-urlencoded, multipart/form-data, text/plain

None of the XMLHttpRequestUpload objects in the request have registered any event listeners

The ReadableStream object is not used in the request.

Complex request

Any of the following HTTP methods, PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH, are used

The first field outside the following set is artificially set, that is, the field outside the simple request

The value of Content-Type does not belong to one of the following, that is, application/x-www-form-urlencoded, multipart/form-data, text/plain

Options key request header field

Key field of request header

The key field functions as Access-Control-Request-Method to inform the server that the actual request will use the POST method Access-Control-Request-Headers to inform the server of the custom request header field that the actual request will carry.

Such as:

Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type

Key field of response header

The key field function Access-Control-Allow-Methods indicates what method the server allows the client to initiate the request Access-Control-Allow-Origin to allow the domain name of the cross-domain request. If you want to allow all domain names, set it to * Access-Control-Allow-Headers. The first field carried by the actual request will tell the server Access-Control-Max-Age how long the result of the pre-check request can be cached.

Options request optimization

When we initiate a cross-domain request, if it is a simple request, then we will only send a request once, but if it is a complex request, we will first issue an options request to confirm whether the target resource supports cross-domain request. Then the browser will automatically process the remaining requests according to the header of the server response. If the response supports cross-domain request, it will continue to send the normal request. If not, an error will be displayed in the console.

Thus, when the pre-check is triggered, the cross-domain request will send two requests, which not only increases the number of requests, but also delays the time when the request is actually initiated, seriously affecting the performance.

Therefore, we can optimize the Options request in two main ways.

Switch to simple requests, such as cross-domain requests using JSONP

Cache the options request and set the Access-Control-Max-Age field on the server. Then when the URL is requested for the first time, the OPTIONS request will be issued, and the browser will cache the response result of the OPTIONS pre-inspection request based on the returned Access-Control-Max-Age field (the specific cache time also depends on the default maximum value supported by the browser. The minimum value of both is usually 10 minutes). During the validity period of the cache, the request for the resource (if the URL and header fields are the same) will no longer trigger a precheck. (chrome opens the console and you can see that when the server responds to Access-Control-Max-Age, only the first request will be pre-checked, but not later. Be careful to enable caching and uncheck the disable cache box. )

At this point, the study on "how to understand options requests" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.