In the interview before, I was asked how CORS solved the cross-domain problem. I only had a general idea before and didn’t have a thorough review. While I can’t sleep today, write an article documenting my understanding of how CORS solves cross-domain problems

So what is cross-domain?

When the protocol, domain name, or port of a URL request is different from the current page URL, it is called cross-domain

What does cross-domain limit?

Simply put, the concept of cross-domain comes from the browser’s same-origin policy. The purpose is to protect the safety of the website, prevent user information disclosure, prevent identity forgery and so on. This is another point of knowledge that I won’t expand on

Began to

We often see situations like this when debugging interfaces

The reason why the browser sends two requests when I only sent one is that the request matches the CORS complex request type. The browser first needs to send an options request to the server to confirm that the information contained in the request is within the constraints of the backend

There are a few keys mentioned above: double request, complex request, Options, constraint scope

One by one

Two requests

Why send the request twice?

When a browser accesses another domain name interface across domains, the same origin policy of the browser is triggered. If the backend uses CORS to solve the cross-domain problem, the browser sends a pre-check request (Options) to check with the backend port. The next request is sent only after the check succeeds. This is why there are two requests.

Complex and simple requests

First of all, the premise of sending precheck request is to hit the complex request of CORS. What is simple request and complex request?

A simple request

  • Use one of the following methods

    • GET
    • HEAD
    • POST

  • Except for header fields that are automatically set by the User Agent (for example, Connection, user-agent) and other headers that are defined in the Fetch specification to disable header names, fields that are allowed to be set artificially are the set of CORS safe header fields defined by the Fetch specification. The set is:

    • Accept
    • Accept-Language
    • Content-Language
    • Content-type (Additional restrictions need to be noted)
    • DPR
    • Downlink
    • Save-Data
    • Viewport-Width
    • Width

  • The value of the content-type is limited to one of the following:

    • text/plain
    • multipart/form-data
    • application/x-www-form-urlencoded

If all of the above conditions are met, it is considered a simple request

options

Options requests are used to test whether the server’s response is correct, that is, whether it can accept the real request. If the response received after the Options request is rejected, such as 500 HTTP status, then it will stop the second real request Options requests do not send a developer-defined header field like token

Scope of constraint

Options requests can be made only if the headers defined by the back end are satisfied

  • Access-control-allow-origin: Specifies the domain names that can be accessed
  • Access-control-allow-headers: Specifies which request Headers are allowed
  • Access-control-allow-methods: Specifies the Access Methods that are allowed
  • Access-control-max-age: indicates the current request cache time, expressed in seconds. If the value is set to -1, options requests must be made for complex requests. Access-control-max-age applies only to the current request

Now that we’ve done the theory, let’s do the practice

Let’s start with nothing on the back end, okay

I don’t have anything on the back end here and I just cross domains, okay

Take a look at the error

Tip No Access_Control – Allow – Origin

Next, modify the back-end code

// koA2 code
ctx.set('Access-Control-Allow-Origin'.The '*')
Copy the code

Take a look at the error

Description No access_Control-allow-origin error was reported but not allowed by access-Control-allow-headers error was reported

Let’s do access-Control-allow-headers


ctx.set('Access-Control-Allow-Headers'.The '*')

Copy the code

You can see that both requests were successful

Let’s look at setting access-Control-max-age

// Set the options cache to 3 seconds
ctx.set('Access-Control-Max-Age'.'3')

Copy the code

As you can see, two requests are sent on the first request, only one request is sent on the second request within 5 seconds, and two more requests are sent 5 seconds later

So that’s the practice for this time.

Access-control-allow-origin = access-control-allow-origin = access-control-allow-origin = access-control-allow-origin = access-control-allow-origin = access-control-allow-origin = access-control-allow-origin = access-control-allow-origin = access-control-allow-origin

Access_control-allow-methods, you can try it yourself

Access- Control-allow-credentials

Access-control-allow-credentials: true if access-control-credentials is set

Ccess_control-allow-origin access-control-allow-headers access_control-allow-methods cannot be set to *, otherwise a cross-domain error will be reported

You can do it yourself

My understanding of CORS is so much for the time being, and I will continue with my new understanding

Refer to the 86 driver ‘s blog