跨域请求携带cookie需配置Access-Control-Allow-Credentials为true

一、跨域请求携带cookie，需要配置以下三方面：

• 1.前端请求时在request对象中配置"withCredentials": true；

   axios({
     withCredentials: true, // ++
     method: "get",
     url: "http://localhost:8080/crosslist",
   }).then((res) => {
     console.log(res);
   });

• 2.后端要在跨域服务端在response的header中配置"Access-Control-Allow-Origin", “http://xxx:${port}”; 同时前端也需要在request请求头中添加"Access-Control-Allow-Origin", “http://xxx:${port}”;

• 3.后端要在跨域服务端在response的header中配置"Access-Control-Allow-Credentials", “true”；前端要在request请求头中添加"Access-Control-Allow-Credentials", “true”；

二、详细解读

• 1.withCredentials
  该XMLHttpRequest.withCredentials属性是一个布尔值，指示是否Access-Control应使用 cookie、授权标头或 TLS 客户端证书等凭据进行跨站点请求。设置withCredentials对同站点请求没有影响。
  此外，此标志还用于指示何时在响应中忽略 cookie。默认值为false. XMLHttpRequest来自不同域的 cookie 不能为自己的域设置 cookie 值，除非在发出请求之前withCredentials设置为。true通过设置为 true 获得的第三方 cookiewithCredentials仍将遵循同源策略，因此请求脚本无法通过document.cookie或从响应标头访问。 —来自MDN

• 2.Access-Control-Allow-Origin
  指定了该响应的资源是否被允许与给定的origin共享

• 3.Access-Control-Allow-Credentials
  当请求的凭证模式 ( ) 为Access-Control-Allow-Credentials时，响应标头告诉浏览器是否将响应暴露给前端 JavaScript 代码。 Request.credentialsinclude
  当请求的凭据模式 ( Request.credentials) 为 时，如果值为include，浏览器只会将响应暴露给前端 JavaScript 代码。 Access-Control-Allow-Credentialstrue
  凭据是 cookie、授权标头或 TLS 客户端证书。
  当用作对预检请求的响应的一部分时，这表明是否可以使用凭证发出实际请求。请注意，简单GET 的请求不会被预检。因此，如果对具有凭据的资源发出请求，并且如果此标头未与资源一起返回，则响应将被浏览器忽略并且不会返回到 Web 内容。
  Access-Control-Allow-Credentials头与 XMLHttpRequest.withCredentials属性或 Fetch API 构造函数中的credentials选项一起使用。Request()对于带有凭据的 CORS 请求，为了让浏览器向前端 JavaScript 代码公开响应，服务器（使用 Access-Control-Allow-Credentials标头）和客户端（通过为 XHR、Fetch 或 Ajax 请求设置凭据模式）都必须表明它们’正在选择包括凭据。 —来自MDN

————————————————
版权声明：本文为CSDN博主「小蛮牧码者」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_35385241/article/details/123186235