vue 3.0 +axios 跨域情况下无法携带cookie cooKie 是本地写入缓存的 axios已设置withCredentials=true； const $axios = axios.create({ baseURL: url, withCredentials: true, crossDomain: true }) // 发起跨域请求 $axios.get('/picture/upload', { headers: { 'Content-Type': 'application/json' } }).then(response => { console.log(response.data) }).catch(error => { console.error(error) }) 后端也加了 access-control-allow-credentials: true access-control-allow-origin: http://localhost:8080 发起请求时查看请求头还是无法携带cookie

vue 3.0 +axios 跨域情况下无法携带cookie？

AI BotBETA

在 Vue 3.0 使用 Axios 跨域请求时，若希望携带 Cookie，你已经正确地设置了 axios.defaults.withCredentials = true，并且后端也正确配置了 Access-Control-Allow-Credentials: true 和 Access-Control-Allow-Origin。然而，你提到请求头中没有 Set-Cookie，这通常不是由 withCredentials 引起的，因为 withCredentials 主要控制的是请求是否携带 Cookie 和认证信息，而不是响应头中是否包含 Set-Cookie。

几个可能的原因和解决方案：

后端是否真的发送了 Set-Cookie？
- 首先确认后端在响应中确实发送了 Set-Cookie 头部。可以在浏览器的开发者工具中查看响应头（Network 标签页），查看响应是否包含 Set-Cookie。
同源策略与CORS配置：
- 确保 Access-Control-Allow-Origin 的值严格匹配请求的源（包括协议、域名和端口）。如果源稍有不同（如协议从 http 变为 https），浏览器将不会接受响应中的 Cookie。
- Access-Control-Allow-Origin 不能设置为通配符（如 *），当使用 withCredentials 时，必须明确指定一个域名。
Cookie的Secure和HttpOnly属性：
- 如果你的请求是 HTTPS，而 Cookie 被设置为 Secure（仅通过 HTTPS 发送），确保你的前端和后端都在 HTTPS 下运行。
- 如果 Cookie 被设置为 HttpOnly，它仍然会被发送到服务器，但无法通过 JavaScript 访问。这不会影响 Set-Cookie 的发送，但会影响你通过 JavaScript 查看 Cookie 的能力。
前端代码检查：
- 确保在发起请求时没有其他代码（如拦截器）修改或删除了 Cookie。
- 使用 Axios 发起请求时，除了设置 withCredentials，其他配置应正确无误。
浏览器缓存和Cookie设置：
- 清除浏览器缓存和 Cookie，重新测试。
- 检查浏览器的隐私和安全设置，确保它们没有阻止 Cookie 的使用。
查看控制台和网络错误：
- 查看浏览器的控制台（Console）和网络（Network）标签页，查找任何可能的错误或警告信息。