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

Question

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

cooKie 是本地写入缓存的

axios已设置withCredentials=true；

axios.defaults.withCredentials = true

后端也加了

access-control-allow-credentials: true
access-control-allow-origin: http://localhost:8080

发起请求时 查看请求头还是没有set-cookie

Answer 1

在 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。

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

1. 后端是否真的发送了 Set-Cookie？

   • 首先确认后端在响应中确实发送了 Set-Cookie 头部。可以在浏览器的开发者工具中查看响应头（Network 标签页），查看响应是否包含 Set-Cookie。

2. 同源策略与CORS配置：

   • 确保 Access-Control-Allow-Origin 的值严格匹配请求的源（包括协议、域名和端口）。如果源稍有不同（如协议从 http 变为 https），浏览器将不会接受响应中的 Cookie。
   • Access-Control-Allow-Origin 不能设置为通配符（如 *），当使用 withCredentials 时，必须明确指定一个域名。

3. Cookie的Secure和HttpOnly属性：

   • 如果你的请求是 HTTPS，而 Cookie 被设置为 Secure（仅通过 HTTPS 发送），确保你的前端和后端都在 HTTPS 下运行。
   • 如果 Cookie 被设置为 HttpOnly，它仍然会被发送到服务器，但无法通过 JavaScript 访问。这不会影响 Set-Cookie 的发送，但会影响你通过 JavaScript 查看 Cookie 的能力。

4. 前端代码检查：

   • 确保在发起请求时没有其他代码（如拦截器）修改或删除了 Cookie。
   • 使用 Axios 发起请求时，除了设置 withCredentials，其他配置应正确无误。

5. 浏览器缓存和Cookie设置：

   • 清除浏览器缓存和 Cookie，重新测试。
   • 检查浏览器的隐私和安全设置，确保它们没有阻止 Cookie 的使用。

6. 查看控制台和网络错误：

   • 查看浏览器的控制台（Console）和网络（Network）标签页，查找任何可能的错误或警告信息。

如果以上都确认无误，但问题依旧存在，可能需要进一步检查网络配置或考虑是否有其他未知因素影响了 Cookie 的发送和接收。