origin

In order to learn from pian (Zan), I decided to track the OPTIONS request secretly to see what hidden transactions it has with the cross-domain request

From the very beginning

Now that we’re talking about stalking, of course we start at home. SHH…

RFC

RFC7231

request

  1. The OPTIONS method is used to request information about the communication OPTIONS available to the target resource
  2. This method allows clients to determine communication options or requirements for a given resource

The response

  1. A successful server response should return in the header the functionality supported by the server for the currently requested resource

MDN

The RFC above is really hard to read, not very human to understand. So I dare to use human translation

The OPTIONS method is the communication OPTIONS allowed for a given URL or server request

The above words are machine turned MDN, after all, I this English class net sleep Lord see English is still a little hard. But it’s kind of hard to understand, so you can’t blame me for showing it

The OPTIONS request is used to request the server for some restriction information (such as header and method) on the access of a resource (URL). Then the client decides what to do according to the restriction information returned by the server

For browsers, if the OPTIONS request returns a restriction that doesn’t match our actual request, the next step is to give us a big error message

Peep Money (Cross-domain)

Cross-domain I believe you all understand, do not understand the students to sign up for after-school classes

OPTIONS and cross-domain transactions are not easy to use on the table, so there are usually some codes. Fortunately, a knowledgeable person like me can easily crack them

Cross-domain head

All said the code, of course, the two sides of the affirmation is not the same, and not a repeater

request

Access-control-request-method: The Method to be used for the next real Request

Access-control-request-headers: specifies a custom header set for a real Request

The response

Access-Control-Allow-Origin

  1. Domains where real responses can be used (contact person’s well-connected organization)
  2. * indicates that all fields are available
  3. The * returned by a credentialed request has no special semantics, indicating that the field is *.

Access-Control-Allow-Methods

  1. The request method that can be used for a real request (contact person to tell you which way to go, don’t get lost)
  2. For uncredentialed requests, * represents a wildcard (all roads lead to resources)
  3. For credentialed requests, * has no semantics, which means * the request method.

Access-Control-Allow-Headers

  1. Real request can be customized header (contact person to tell what goods to bring)
  2. For requests without credentials, * is treated as a wildcard
  3. For a credential request, * has no semantics, which means * the request method.

Access-Control-Max-Age

  1. The number of seconds in which the response returned by the OPTIONS request can be cached.

Access-Control-Allow-Credentials

  1. Tell if the response can be used by the requested code (the receiver sent the wrong product)
  2. When prechecking a request, it indicates whether a real request has a credential request

Me: Here, I see probably also clear, it does have some transactions (cross-domain and OPTIONS), and the transaction is money

Student: Yeah, OPTIONS is a cross-domain employee

Praise this classmate, probably is almost this meaning, but how can call a person horse boy, want to call a good employee

Set out (to request)

OPTIONS have been understood, the rest of the difference in time, the schedule can be set. Of course, as a large investor, we must not shortchange our employees. We must meet the requirements of working from 9 to 5 days, or we will be tired to death

Therefore, for the physical and mental health of employees, we have the following strategies: Requests are divided into simple requests and complex requests. For simple requests, we do not care, and for complex requests, we send our OPTIONS request to contact

A simple request

A request that meets the following conditions can be considered a simple request

  1. This is limited to GET, HEAD, and POST methods
  2. The request headers that can be set manually are only Accept, Accept-language, Content-Language, and Content-Type
  3. Content-type is limited to Application/X-www-form-urlencoded, multipart/form-data, text/plain
  4. No event listening for the XMLHTTPRequest object upload property
  5. No ReadableStream object (Fetch) used

So let’s take a look at each of these constraints, what do they mean

Of course, in order to verify that we need to write two simple servers to simulate the cross-domain scenario, our code is really poor, I will not post the code, you can write yourself, do not need a few lines of code

Attention, the front group map appears, suggest wifi watch, traffic please be careful, when the time and the little girl chat no flow can not blame me

Request method

The HEAD request did not send the OPTIONS precheck request, but it encountered a cross-domain error

Access-control-allow-origin does not return the access-Control-allow-origin header, which indicates that a simple request will not initiate a OPTIONS precheck request, but it will still trigger cross-domain.

Okay, let’s make some changes to the restart server code and look at the other requests

As you can see, the HEAD, GET, and POST methods did not trigger the precheck request, so let’s look at the PUT method

Well, the PUT method does trigger the precheck request, so we won’t experiment with the following methods

The server will wait 30 seconds for the OPTIONS request to return, so let’s see the result

Meanwhile, pending is pending. It seems that it is not easy to judge. Let’s change the server code and print it

A real request will only be made if OPTIONS is returned. If the limit information returned by the OPTIONS request does not match the real request, will the real request be issued

As you can see, when the limited information returned by the OPTIONS request does not match the actual request, the browser does not choose to issue the actual request, but simply throws an error in our face

Of course, THE browser I use is Chrome, other browsers may have different behavior, such as OPTISON request and real request sent at the same time, this we will not go to see, writing the article is very tired to say

Request header

Dry mouth, drink saliva, stickers everyone see

File upload

If there is an event to listen on the upload of a file, it does trigger a precheck request, and if there is no listening, it does not trigger a precheck request

ReadableStream

If the request uses ReadableStream and no precheck request appears, the code is as follows

Complex request

Obviously, a request that is not simple is a complex request. For a complex request, the browser needs to send an OPTIONS request to initiate a precheck request

For example, the json request we often use is a complex request that triggers a precheck request because the content-Type is set outside the scope of a simple request

Bring a token (certificate)

We mentioned earlier that there would be some inconsistency between the performance with and without vouchers. Then what is the discrepancy? Let’s take a look

A simple request

The Access-Controll- allow-credentials header is missing in the Credentials header, indicating that the Access-Controll- allow-credentials header is missing in the Credentials header. The Access-Controll- allow-credentials header is missing in the Credentials header. The Access-Controll- allow-credentials header is missing in the Credentials header. The response is eaten by the browser

Complex request

If the restriction information returned by OPTIONS does not match the real request, the real request will not be sent

A complex request will make two requests, one OPTIONS request and one real request. The OPTIONS request determines whether to make a real request. What happens when there is no access-controll-allow-credentials header in the response to a real request

You can see that if the real request does not return the correct header information, our request fails. As you can see, the access-Controll-allow-Credentials header is the same as the Access-Controll-Allow-Origin header for normal cross-domain responses. If the header is missing, the request fails

Now that the problem is clear, we let the other party know that we carry the token can smoothly docking

We add the following code to the server

res.setHeader('Access-Control-Allow-Credentials'.true);
Copy the code

Next to witness the miracle

The request was successful, and the cookie was loaded correctly

End of action (Epilogue)

At this point, the action is over, I did not expect that the other two is a simple employment relationship, so that we spend so much energy to adjust (wei).

Of course, also can’t say to have no what harvest, after all time is brought wave (xue) fee (XI), we also should do some serious work