The front-end uses AXIOS to submit data and uses interception to set header information

The token can’t be found on the back end. The front end returns 401

Simple Request and Not-simple-Request

One, simultaneously satisfies the following three conditions, belongs to the simple request, otherwise belongs to the non-simple request

1. The request method can only be:

GET, POST, and HEAD2. The HTTP request header contains the following fields: Accept, accept-language, Content-language, content-Type, and last-event-ID3. Application/X-www-form-urlencoded, multipart/form-data, Text /plain For simple requests, browsers will add an Origin field in the request header information, To specify the source (protocol + domain + port) from which the request came. The server uses this value to decide whether to approve the request or not, and the server returns a response with several more header fields, as shown in the figure: Three of the above headers are related to CORS requests, all of which begin with Access-Control-.Copy the code

2. The Access – Control – Allow – Origin:

2. Access-control-allow-credentials: This field is an optional Boolean value, indicating whether cookies are allowed. (Note: Access-control-allow-origin invalid if access-Control-allow-origin is set to *)Copy the code

3. Access – Control – Allow – Headers:

This field is optional. Cache-control, Content-Type, Expires, etc. If you want to retrieve other fields, you can specify it in this field. For example, the GUAZISSO non-simple requests specified in the figure are requests that have special requirements on the server, such as PUT or DELETE, or content-Type fields of application/ JSON. An HTTP request is added before formal communication, called precheck. The browser first asks the server if the domain name of the current web page is on the server's approved list. When the server allows this, the browser issues a formal XMLHttpRequest request; otherwise, an error is reported.Copy the code

Ii. Comparison between pre-request and formal request:

Pre-request: OPTIONS does not have a custom token in the request header.

Formal request:

The problem:

Browsers do not carry custom headers in pre-checked requests. They only carry headers and parameters in formal requests. The same fields are added to the response header just as in normal requests. Once the server passes the precheck request, the custom token for the header in the request can be obtained in subsequent formal requests.

Treatment methods:

The back end intercepts the browser’s request and obtains the request mode. If the request mode is pre-request, the custom attribute in the past header is given, but the intercepted request is formal, the logical processing is performed only then (obtain the custom parameter or obtain the token for session verification).