CORS is a W3C standard, which stands for “Cross-origin Resource Sharing”. If the scheme+host+port addresses are different, they are the addresses of different domains.

1. 为什么有CORS

Cors is the policy of the browser to ensure the security of resource calls on the network. If the browser only access resources, there will be no cross-domain problems, such as access to images, JS files; However, if you are reading metadata, you are limited by browser CORS, such as AJAX requests.

2. CORS request type

Browsers classify CORS requests into two categories: Simple request and not-so-simple Request.

  • The request method is one of three: HEAD, GET, and POST
  • The HTTP header does not exceed the following fields: Accept, accept-language, Content-language, last-event-ID, and Content-Type: Application/X-www-form-urlencoded, multipart/form-data, text/plain are limited to three values

A simple request meets the preceding conditions; otherwise, a non-simple request (such as a common custom header field or Content-Type:application/ JSON).

2.1 Simple Request

For simple requests, the browser adds the Origin field to the Request header to identify the source of the request. After processing the request, the server returns the response information. The browser checks the response information and finds that no cross-domain information, such as access-Control-Allow-Origin, is set in the response header. Therefore, the browser intercepts the request and throws an error.

2.2 Non-simple Requests

When a non-simple cross-domain request is sent, the browser adds an Options precheck request. The general process is as follows:

  • The browser sends a POST request with a custom field in the header
  • The browser will issue a prefight Request with options if the request is not simple.
  • In the precheck request, the browser will check the response returned by the server. If the cross-domain field has been added to the response, the precheck request passes
  • The browser then sends the actual POST request

The request header sets the custom field

If a custom header field is added to a non-simple request, set access-Control-allow-headers to ‘Custom header field name’ in response. In this case, the pre-check request is verified.

Request headers: {' content-type ': 'application/json', 'system': 'web', 'version': 'v1.0'}Copy the code
// Response
'Access-Control-Allow-Headers': 'Content-Type, system, version'
Copy the code

Get cookies across domains

To read cookies across domains, the following three conditions must be met:

  • When the client sets withCredentials: true(credentials:’include’), it agrees to send cookies
  • The access-control-allow-credentials command is set to true on the server, indicating that the server agrees to receive cookies
  • Access-control-allow-origin Specifies a fixed domain name

The front end reads the response header field

Generally, the front end can only read the resopNse body. If you want to read the response header from the definition, you need to set the access-Control-expose-headers field to specify the header field to Expose. This allows the front end to read the header information in the response header through JS.

// js
let system = response.headers.get('system');
Copy the code
// response
Access-Control-Expose-Headers: 'system'
Copy the code

Request types other than GET, HEAD, and POST are supported

If a request type is DELETE, the access-Control-allow-methods field needs to be set in the response header.

// response
Access-Control-Allow-Methods: 'delete'
Copy the code

Cache precheck requests

You can use access-Control-max-age to set the validity period of precheck requests. Precheck requests for the same request will only be requested once during this time.

// Response Access-Control-max-age: 100 // Use cached precheck requests within 100 secondsCopy the code

3. Set the cross-domain header

3.1 Access – Control – Allow – Origin

If the value is * or a fixed domain name, it indicates the domain name that allows cross-domain requests.

3.2 Access – Control – Allow – Credentials

The value is true/false, indicating whether the server accepts cookies. To transfer cookies across domains, Access- Control-allow-credentials: true is the exception. Client requests also need to set withCredentials: true, which indicates that the browser agrees to send cookies. Access-control-allow-origin must also be a specified domain name.

3.3 Access – Control – Allow – Headers

Value is the custom header field set in the request header.

3.4 Access – Control – Expose – Headers

Value is the header field that needs to be exposed.

3.5 Access – Control – Allow – the Methods

Only three types of GET, HEAD, and POST are accepted for cross-source requests. Access-control-allow-methods: ‘XXX’ is set in the response header for other request types.

3.6 Access – Control – Max – Age

Access-control-max-age Specifies the validity period of this precheck request, in seconds.

The resources

www.ruanyifeng.com/blog/2016/0…

Mp.weixin.qq.com/s/y8e1HLNzb…