Options request (cross domain pre check)

summary

options A request is a pre check request , Can be used to detect what the server allows http Method . When a cross domain request is initiated , For safety reasons , When a certain condition is triggered, the browser will automatically initiate before the formal request OPTIONS request , namely CORS Pre inspection request , If the server accepts the cross domain request , The browser continues to make formal requests .

One 、 What is? options request

HTTP Of OPTIONS Method Used to get the communication options supported by the destination resource . The client can URL Use OPTIONS Method , Or the whole station （ By way of URL Set to "*"） Using this method .( In short , It can be used options Request to sniff which request method is supported in the corresponding server ).

reason

This is because in a cross domain situation , Launch in browser " Complex request " It was initiated on its own initiative . Cross domain sharing standards and specifications require , For those that may have side effects on server data HTTP Request method （ especially GET Outside of the HTTP request , Or something MIME Type of POST request ）, Browsers must first use OPTIONS Method to initiate a pre check request （preflight request）, So we can know whether the server allows the cross domain request . After the server confirms the permission , To launch the actual HTTP request .

Two 、 Simple requests and complex requests

Some requests don't trigger CORS Pre inspection request , Such a request is generally called  “ A simple request ” , The request that will trigger the pre inspection is  “ Complex request ” .

• A simple request

• The request method is GET、HEAD、POST Time's request ;
• Consider setting the header field within the specification set , Such as Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width;
• Content-Type Is limited to one of the following three values , namely application/x-www-form-urlencoded、multipart/form-data、text/plain;
• Arbitrary in the request  XMLHttpRequestUpload Object does not register any event listeners ;
• Not used in the request  ReadableStream object .

• Complex request

• PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH;
• Artificially set the header field outside of the following set , That is, the fields outside the simple request ;
• Content-Type The value of is not one of the following , namely application/x-www-form-urlencoded、multipart/form-data、text/plain.

3、 ... and 、option Key fields

• request header Key fields for

  

• response header Key fields for

  

3、 ... and 、Options Request to optimize

When a cross domain request is initiated , A simple request initiates only one request ; Complex requests require 2 Time , First initiate options request , Confirm whether the target resource supports cross domain , The browser will respond according to the server header Automatically process the remaining requests , If the response supports cross domain , Then continue to make normal requests ; If you don't support it , An error will be displayed on the console .
therefore , When the preview is triggered , Cross domain requests are sent 2 Requests , Increase the number of requests , meanwhile , It also delays when the request actually starts , Can seriously affect performance .

Optimize options Two ways to request ：
Method 1 ：  Use other cross domain methods to make cross domain requests , Convert complex requests to simple requests , such as JSONP etc. ;
Method 2 ：  Yes options Request to cache .
        Server settings Access-Control-Max-Age Field , So when you first request that URL Will be issued when OPTIONS request , The browser will respond to the Access-Control-Max-Age Field to cache the name of the request OPTIONS The response result of the pre check request （ The specific cache time also depends on the default maximum supported by the browser , Take the minimum of both , It's usually 10 minute ）. Within the cache validity period , The request for the resource （URL and header If the fields are the same ） It's not going to trigger a preview .（chrome Open the console and you can see , When the server responds Access-Control-Max-Age Only the first request has a preview , Not in the back . Be careful to turn on caching , Get rid of disable cache Check .）

The article citations ：https://javajgs.com/archives/97325