Cross-domain should be familiar to the front end, and there are many solutions to cross-domain. The front-end interface invocation of our company is also the way of CORS, so it is inevitable that we will encounter some cross-domain problems of CORS in the joint investigation stage. The following is a simple demo to verify the cross-domain solving process of CORS, and make a simple summary of some unclear knowledge points

Example demo has been placed on GitHub, where the directory client folder hosting client code, server directory as the server to process CORS, respectively run the code at both ends, you can learn about CORS related configuration

For a better understanding of CORS, you can first read these two articles by Ruan:

1. The same Origin policy of the browser and its circumvention method 2

Assuming you already know that the server will configure some response headers when handling CORS across domains, as follows:

Access-Control-Allow-Credentials: true,
Access-Control-Allow-Origin: *,
Access-Control-Allow-Headers: 'header',
Access-Control-Expose-Headers: 'serve-header',
Access-Control-Allow-Methods: 'methods',
Access-Control-Max-Age: '1800'.// 30min = 1800s
Copy the code

So what exactly do these response headers do? The following shows how to configure each parameter based on demo, and shows the result.

Access-control-allow-origin: access-Control-allow-origin

What it does: the server allows cross-domain sources, i.e. browser input addresses. In demo, http://huoyun-test.djtest.cn includes port number 80. Port 80 is omitted by default.

If the origin of the server is changed to http://huoyun-online.djtest.cn, the browser package will receive the following error when sending the request:

As shown above, the request header and response header and the console (1, 2, 3) are: Because of the CORS policy, the browser pre-checks the request options to find that the URL corresponding to the source Origin is not in the range allowed by the CORS cross-domain class. Therefore, the server should set the corresponding page domain name http://huoyun-test.djtest.cn, so that the error will not be reported.

The second parameter: access-control-allow-credentials

Function: Carries cookies

If cookies need to be passed during interface invocation, set this parameter to true. Access-control-allow-origin cannot be set to an asterisk (*) and must specify an explicit domain name consistent with the requested web page. If you use the front axios to request interface, needs to set at the same time axios. Defaults. WithCredentials = true;

Access-control-allow-origin: * Access-control-allow-origin: *

axios.defaults.withCredentials=true;

When the browser sends requests through the XMLHttpRequest object and the withCredentials attribute is set to True, the server needs to handle the request accordingly.

So the current backend in CORS cross-domain problems, by modifying demo to verify can be very good to find the answer, rather than Baidu again, is still at a loss, do not know what to let the server, at the same time as the front-end should do, do not let yourself at this time become a front-end white, have something to say…

The third parameter: access-Control-allow-headers

Role: If the front and back ends need to use the Header for data exchange, you need to set the header field.

Such as front end by setting the request header header fields in the axios.defaults.headers.com mon [‘ client – the header ‘] = 1; If no header field is set for the access-Control-allow-headers field, the browser displays the following error:

In other words, the server needs to set the corresponding header in the access-Control-allow-headers field

The fourth parameter: access-Control-expose-headers

Function: Allows the browser to obtain the corresponding header value

Res.setheader (‘serve-header’,’from-> Express ‘); However, the corresponding access-Control-expose-headers field in CORS is not processed. In this case, the result of the header is as follows:

Access-control-allow-headers: serve-header = access-Control-allow-headers: serve-header = access-Control-allow-headers

The serve-header field in the response header set by the server is now available

The fifth parameter: access-Control-max-age

Effect: Controls the frequency of sending precheck requests options

1. If access-Control-max-age: 0 is set, the browser will always send the pre-check request options before sending the request. As shown in figure

Every time you click the Send CORS button to request API/GeTCors, an Options precheck request is sent

Access-control-max-age: 1800; access-control-max-age: 1800;


When you click the Send Cors button to request API /getcors, only the first options precheck request will be sent, and no options request will be sent on subsequent requests

If your Chrome browser is in debug state, Disable cache is disabled as follows:

That is, a precheck request is sent each time

Access-control-max-age :1800 Sets the cache time only for requested interfaces such as API /getcors. When you click send cors2 to request API /getcors2 for the first time, Options is also sent as a precheck request

Parameter 6: access-control-allow-methods

Effect: Request method limits

Access-control-allow-methods = access-control-allow-methods = access-control-allow-methods = access-Control-allow-methods

The six parameters are summarized here, and the cookie carrying process when CORS is across domains is supplemented below

CORS cross-domain cookie portability

First, Cookie operation has non-cross-domain characteristics, such as:

// Client Settings
Cookies.set('cookie-value'.'1', { domain: 'huoyun-test.djtest.cn' });
Cookies.set('cookie-value'.'2', { domain: 'test.djtest.cn' });
Cookies.set('cookie-value'.'3', { domain: 'djtest.cn' });

// Server Settings
res.setHeader('Set-Cookie'.'cookie-value=22; domain=.test.djtest.cn; path=/');
Copy the code

Open the Chrom debugging tool as follows

That is: Djtest. cn page huoyun-test.djtest.cn cannot operate the cookie of test.djtest.cn. Cookie-value =22; domain=.test.djtest.cn; Path =/

Then request the interface API/GeTCors, the server received the cookie value which shall prevail? As follows:

Set (‘cookie-value’, ‘3’, {domain: ‘djtest.cn’}); Shall prevail

The last

For express middleware CORS, and cookie-Parser parsing code are not complex, students want to know, welcome clone demo debug, will be deeply impressed

reference

Details on cross-domain resource sharing CORS 3. How to distinguish different users — Details on Cookie/Session mechanism 4. In-depth understanding of cookies

Pay attention to our