Reference link
Browser Same-origin Policy and its Avoidance Method
Cross-domain resource sharing CORS Detailed
Cookie SameSite attribute
When cross-domain encounters Cookie and SameSite
Cross-Site Request Forgery is dead!
How to send cookies across domains
front end:
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
Add these fields to the response returned by the backend
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:8080 (必须与请求网页一致的域名)
Access-Control-Expose-Headers: Origin
It is not always possible to send cookies after meeting these requirements. You need to pay attention to the SameSite field in cookies.
- When SameSite is Lax, whether or not to transmit cookies depends on the type of your request method. For specific types, you can view the SameSite attribute of cookies .
- When SameSite is None, whether to transmit cookies requires you to set Secure to transmit, which is https.
The article says that Chrome80 has set SameSite as Lax by default. Starting testing with Firefox 69, subsequent versions will also set SameSite to Lax.
The official chrome documentation says that version 76 has started. SameSite is set to Lax
Cookies default to SameSite = Lax Network / Connectivity
My example
My current version is chrome version 81.0.4044.113 (official version). SameSite is not set for cookies. Use ajax to send get and post requests. You can send
warning messages printed in the cookie cross-domain request console.
A cookie associated with a cross-site resource at http://127.0.0.1/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests
if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at
https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
Front-end html
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
console.log(xmlhttp.responseText);
}
}
xmlhttp.open("GET","http://127.0.0.1:8082/test/post",true);
//xmlhttp.open("POST","http://127.0.0.1:8082/test/post",true);
xmlhttp.withCredentials = true;
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">cors</button>
<div id="myDiv"></div>
</body>
</html>
request和response
Enter chrome: // flags / in the chrome? address bar. Set SameSite by default cookies to enable, this is when the SameSite property is not set in the browser, SameSite is set to Lax by default.
Re-post the post, ajax get request, can not send cookies, so it seems that when the SameSite property is not set in my version of the browser, SameSite is not set to Lax by default.
Special cases
In the version of chrome 66 on the company's computer, it is found that SameSite is set to none, secure is also set, and https requests are also sent. No matter whether it is cross-domain or non-cross-domain, it cannot be sent. As a result, a user can't log in all the time, and each request sets a new cookie.
to sum up
It is too difficult to carry cookies across domains, so upload the token in the header.