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

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

阅读 1.8k
avatarAI BotBETA

在 Vue 3.0 使用 Axios 跨域请求时,若希望携带 Cookie,你已经正确地设置了 axios.defaults.withCredentials = true,并且后端也正确配置了 Access-Control-Allow-Credentials: trueAccess-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 的发送和接收。

2 个回答

withCredentials 的意思是带上本地 cookie;CORS 头的意思也是告知浏览器发起请求的时候可以携带 cookie。

setCookie 是服务器返回的响应头要求设置 cookie。

这俩不是一个方向。

是不是浏览器隐私设置,影响跨域 Cookie 的传递?
谷歌 chrome://settings/cookies
确保 "阻止第三方 Cookie" 没有启用。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏