跨域场景下Laravel API返回的Cookie未被浏览器设置问题咨询

• axios未开启跨域凭证携带配置
  跨域请求场景下，axios默认withCredentials配置为false，此时浏览器会忽略跨域响应的Set-Cookie头，也不会自动携带目标域的Cookie，需要修改axios配置：

// 全局配置
axios.defaults.withCredentials = true;
// 单请求配置
axios.get("https://api.example.com/users", { withCredentials: true })

• 后端CORS配置不符合规范
  带凭证的跨域请求要求后端必须满足两个条件：
  1. Access-Control-Allow-Origin不能设置为通配符*，必须明确指定允许的源，即http://127.0.0.1:3000
  2. Access-Control-Allow-Credentials必须设置为true
     Laravel项目可以通过配置config/cors.php文件修改对应参数，修改后记得清空配置缓存。
• Cookie属性不匹配跨站场景
  当前返回的Cookie存在两个适配问题：
  1. 前端站点127.0.0.1:3000和API域api.example.com属于完全独立的跨站关系，默认samesite=lax属性会阻止跨站场景下的Cookie写入和携带，需要将SameSite属性修改为None
  2. 当SameSite设置为None时，必须同时开启Secure属性，Cookie仅能通过HTTPS协议传输。如果本地开发要兼容HTTP，可在开发环境临时设置SameSite=lax同时明确指定Cookie的Domain适配场景。
• 跨域场景下前端JS无法读取异域Cookie
  浏览器同源策略限制了JS只能读取当前站点域下的Cookie，你前端运行在127.0.0.1:3000，本身就无法通过document.cookie读取api.example.com域下存储的XSRF-TOKEN。如果需要跨域传递CSRF令牌，可改为从响应头自定义字段读取后手动传递，或者调整前后端部署为同根域下的不同子域。

内容的提问来源于stack exchange，提问作者Axel