What is an Options request

Take a look at the description in MDN:

The HTTP OPTIONS method is used to get 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 “*”).

Options requests can be used to sniff out which request methods are supported on the corresponding server.

In the front end we don’t usually initiate this request actively, but often you can see the same request being made twice in the browser, as shown here:

In fact, this is because the browser initiates a “complex request” in a cross-domain situation. The standard specification for cross-domain sharing requires that HTTP request methods (especially HTTP requests other than GET, or POST requests paired with certain MIME types) that may have adverse effects on server data, The browser must first issue a preflight request using the OPTIONS method to know whether the server will allow the cross-domain request. The actual HTTP request is made only after the server confirms that it is allowed.

Simple versus complex requests

Some requests do not trigger a CORS precheck request. Such requests are generally called “simple requests “, while those that do are called” complex requests “.

A simple request

  • The request method isGET, HEAD, POSTWhen the request was sent
  • The header field within the specification collection is set artificially, as shown inAccept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width
  • Content-TypeIs limited to one of the following three values, i.eApplication/X-www-form-urlencoded, multipart/form-data, text/plain
  • None of the XMLHttpRequestUpload objects in the request have any event listeners registered;
  • No ReadableStream object is used in the request.

Complex request

  • Use the following any HTTP method, PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH
  • The header field outside the following collection, that is, the field outside the simple request, was set artificially
  • The value of the content-Type does not belong to one of the following, i.eApplication/X-www-form-urlencoded, multipart/form-data, text/plain

Options Key request header fields

Key fields of the Request Header

Key fields role
Access-Control-Request-Method Tell the server that the actual request will use the POST method
Access-Control-Request-Headers Tells the server 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
Copy the code

Key field of response Header

Key fields role
Access-Control-Allow-Methods What method does the server allow the client to initiate a request
Access-Control-Allow-Origin Domain name to allow cross-domain requests. To allow all domain names, set this parameter to *
Access-Control-Allow-Headers Tells the server the header field carried by the actual request
Access-Control-Max-Age Specifies how long the results of a precheck request can be cached

Options request Optimization

When we make a cross-domain request, if it is simple, we will only send one request, but if it is complex, we will send the options request first, which is used to confirm whether the target resource supports cross-domain. Then the browser will automatically process the remaining requests according to the header of the server response. If the response supports cross-domain, The normal request continues, and if it is not supported, an error is displayed on the console.

Therefore, when precheck is triggered, cross-domain requests will be sent twice, which not only increases the number of requests, but also delays the time when the request is actually initiated, seriously affecting performance.

So, we can optimize Options requests in two main ways.

  1. Switch to simple requests, such as cross-domain requests using JSONP
  2. Caches options requests, server side SettingsAccess-Control-Max-AgeThe browser will cache the response result of the OPTIONS precheck request based on the returned access-Control-max-age field (the specific cache time also depends on the default maximum supported by the browser). Take the minimum value of both, generally 10 minutes). Requests for the resource (with the same URL and header fields) will no longer trigger precheck during the cache lifetime. (Chrome opens the console to see that only the first request is prechecked when the server responds to access-Control-max-age, not later. Note To enable cache, deselect disable cache.

conclusion

Options requests are pre-checked requests that can be used to detect HTTP methods allowed by the server. For security reasons, when certain conditions are triggered, the browser automatically sends an OPTIONS request, that is, a CORS precheck request, before a formal request. If the server accepts the request, the browser continues to send a formal request.

The resources

  • Developer.mozilla.org/zh-CN/docs/…
  • zhuanlan.zhihu.com/p/70032617

The last

  • Welcome to add my wechat (Winty230), pull you into the technology group, long-term exchange learning…
  • Welcome to pay attention to “front-end Q”, seriously learn front-end, do a professional technical people…