Vue.js前端无法保存后端发送的JWT Cookie问题求助

先排查Cookie本身的属性设置 #

• SameSite属性：如果后端把Cookie的SameSite设成Strict或Lax，前后端跨域场景下浏览器会直接拦截存储。改成SameSite=None，但必须同时搭配Secure属性——不过本地HTTP开发环境中，Secure会导致Cookie无法保存，这种情况可以在开发阶段临时关闭Secure，生产环境再启用。
• Domain属性：要和前端域名匹配，比如前端是localhost:8080、后端是localhost:3000，Domain就设成localhost，别带具体端口，否则域名不匹配会导致Cookie存不上。
• Path属性：直接设为/，保证整个站点下的页面都能访问该Cookie，避免路径限制导致无法读取。

确认前端请求配置 #

• 别只在登录请求里加credentials: 'include'，后续所有需要携带Cookie的请求都得配置。用axios的话，全局配置更省心：

  axios.defaults.withCredentials = true
  

  单个请求也可以这么写：

  axios.post('/api/login', loginData, {
    credentials: 'include'
  })
  

• 前后端协议必须一致：后端用HTTPS的话前端也得用HTTPS，混合协议会被浏览器直接拒绝存储Cookie。

核对后端CORS配置 #

• Access-Control-Allow-Origin必须写前端的具体域名（比如http://localhost:8080），绝对不能用*——开启credentials时，通配符是不被允许的。
• 确保Access-Control-Allow-Credentials设为true，和前端的配置对应上。

本地开发的特殊处理 #

• 要是本地用HTTP环境，Chrome对SameSite=None的Cookie限制严格，可以临时启动浏览器时加参数绕过：

  chrome.exe --disable-web-security --user-data-dir=C:/MyChromeDevUserData
  

  （注意：仅限开发测试，生产环境绝对不能这么操作）
• 或者直接搭建本地HTTPS环境，用mkcert生成自签名证书，让前后端都用HTTPS，这样Secure属性就能正常生效，Cookie也能顺利保存。

验证方法 #

登录请求发送完成后，按F12打开开发者工具，到Application标签的Cookies栏查看是否有目标Cookie。如果没有，去Console面板找错误提示——浏览器会明确告诉你拒绝存储Cookie的原因，比如SameSite配置错误、Domain不匹配等。

内容的提问来源于stack exchange，提问作者David Jiménez Belmonte