axios 中配置withCredentials引发的问题

XMLHttpRequest：withCredentials 属性

::: tip withCredentials
XMLHttpRequest.withCredentials 属性是一个布尔值，它指示了是否该使用类似 cookie、Authorization 标头或者 TLS 客户端证书等凭据进行跨站点访问控制（Access-Control）请求。设置 withCredentials 对同源请求是无效的。
:::

此外，这个标志还用于指示何时在响应中忽略 cookie。默认值是 false。除非在发送 XMLHttpRequest 请求之前，将 withCredentials 设置为 true，否则来自不同域的 XMLHttpRequest 响应无法为自己的域设置 cookie 值。而通过设置 withCredentials 为 true 获得第三方 cookie，仍将遵循同源策略，因此请求的脚本无法通过 document.cookie 或者响应标头访问。

::: tip 备注
永远不会影响到同源请求。
不同域下的 XmlHttpRequest 响应，不论其 Access-Control- 标头设置什么值，都无法为它自身站点设置 Cookie 值，除非它在请求之前将 withCredentials 设为 true。
:::

设置withCredentials属性之后开启访问跨域访问失效

在axios发送请求之前设置的withCredentials属性为true之后，如果服务器端开启了跨域但不是指定域名跨域而是设置了Access-Control-Allow-Origin', '*'，此时在浏览器访问该接口会报错

:::danger
Access to XMLHttpRequest at ‘https://hjtzsqkn5sd9.hk1.xiaomiqiu123.top/’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
:::

配置withCredentials

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url
  withCredentials: true, // 跨域请求时发送Cookie
  timeout: 60000, // 请求超时
  headers: {
    "Content-Type": "application/json; charset=UTF-8;"
  }
});

Access-Control-Allow-Credentials 头 工作中与XMLHttpRequest.withCredentials 或Fetch API中的Request() 构造器中的credentials 选项结合使用。Credentials必须在前后端都被配置（即the Access-Control-Allow-Credentials header 和 XHR 或Fetch request中都要配置）才能使带credentials的CORS请求成功。

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/withCredentials

:grinning::grinning::grinning: