Solution to cross-domain problems encountered in the project

CORS request with credentials

Credentials and CORS

Credentials can be cookies, authorization headers or TLS client certificates.
CORS requests not to send Credentials by default.

How to make CORS request to send Credentials?

If you want the CORS request with credentials to succeed, both the front and back ends need to be configured. Otherwise, even if the server agrees to send cookies, the browser will not send them. Or, the server requires cookies to be set, and the browser will not process it either.

Cookies still follow the same-origin policy, only cookies set with the server domain name will be uploaded, cookies of other domain names will not be uploaded

Configuration

Back-end configuration:
Access-Control-Allow-Credentials header;
Front-end configuration:
XHR configuration withCredentials or Fetch request configuration credentials ;

Access-Control-Allow-Credentials

Its value is a Boolean value, which indicates whether to allow the sending of cookies. By default, cookies are not included in CORS requests. Set it to true , which means that the server clearly allows the cookie to be included in the request and sent to the server together.
If the server does not want the browser to send cookies, just delete this field.

Request.credentials

credentials is the read-only attribute of the Request interface, used to indicate whether the user agent should send cookies from other domains in the case of cross-domain requests. There are three optional values:

• omit : Never send cookies.
• same-origin : Only when the URL is the same as the response script, will the authentication information such as cookies and HTTP Basic authentication be sent.
• include : Regardless of whether it is a cross-domain request, the authentication information such as cookies and HTTP Basic authentication in the requested resource domain is always sent.

XMLHttpRequest.withCredentials

withCredentials is a Boolean type. If it is true, Credentials will be carried when performing cross-domain requests, otherwise it will not be carried. The default value is false.

• withCredentials is not set to true before sending an XMLHttpRequest request from another domain, then it cannot set the cookie value for its own domain.
• Third-party cookies obtained by setting withCredentials to true will still enjoy the same-origin policy and cannot be accessed through document.cookie or scripts requested from the header.
• It is invalid withCredentials attribute under the same site. It will never affect the same-origin request.

example

The backend allows credentials:

Access-Control-Allow-Credentials: true

The front end uses an XHR request with credentials:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/', true);
xhr.withCredentials = true;
xhr.send(null);

The front end uses a Fetch request with credentials:

fetch(url, {
  credentials: 'include'
})

When credentials is include, Access-Control-Allow-Credentials must be set to true; when credentials are other values, Access-Control-Allow-Credentials may not be set.

Set credentials:'include' does not take effect

Now the Fetch request to set the credentials is as follows:

fetch(url, {
  credentials: 'include'
})

Actual request:

fetch(url, {
  credentials: 'omit'
})

Why did include invalid, but was modified to omit ?
After inspection, it is found that the current page protocol is http , and the request url protocol is https . If the two protocols are different, the credentials should be actively modified to'omit' when requesting.