跨域请求Laravel Sanctum接口不设置Cookie报419 CSRF错误如何解决？

问题相关信息 #

运行环境 #

• Sanctum 版本：2.11.2
• Laravel 版本：8.55.0
• PHP 版本：7.4.20
• Laravel 运行地址：http://127.0.0.1:8000
• Vue 前端运行地址：http://localhost:3000

现有配置 #

.env 配置内容如下：

COOKIE_SAME_SITE_POLICY=strict
SESSION_SECURE_COOKIE=false
SESSION_DOMAIN='.127.0.0.1'
SANCTUM_STATEFUL_DOMAINS='.localhost,.localhost:3000,127.0.0.1,127.0.0.1:8000,::1'

问题现象 #

跨域进行身份认证时返回419 CSRF token mismatch错误，首先发起的http://127.0.0.1:8000/sanctum/csrf-cookie请求未成功设置Cookie；但相同请求在Laravel服务侧直接发起时可正常设置Cookie，在Postman中发起也能成功设置Cookie。

复现步骤 #

• 执行composer create-project laravel/laravel sanctum安装Laravel
• 修改/config/cors.php文件，将'supports_credentials' => false,改为'supports_credentials' => true,
• 在http://localhost:3000部署Vue应用，向http://127.0.0.1:8000/sanctum/csrf-cookie发起请求，会出现Cookie未设置的问题。

解决方案 #

1. 统一前后端访问域名：浏览器中localhost和127.0.0.1为完全独立的站点，Cookie无法跨站点共享。要么将前端请求地址改为http://127.0.0.1:3000，要么将后端访问地址改为http://localhost:8000，保证二者根域一致。
2. 调整.env配置参数：以统一使用localhost为例，修改如下配置：

# 调整Cookie生效域为localhost
SESSION_DOMAIN=.localhost
# 只保留实际用到的有状态域名，删除多余配置
SANCTUM_STATEFUL_DOMAINS=localhost:3000,localhost:8000
# 本地开发将同站策略改为lax，strict会拦截跨站请求的Cookie
COOKIE_SAME_SITE_POLICY=lax

3. 开启前端请求凭证携带：使用axios时全局配置axios.defaults.withCredentials = true；使用fetch时请求参数添加credentials: 'include'，否则浏览器会忽略后端返回的Set-Cookie头，也不会主动携带Cookie发请求。
4. 清空浏览器现有相关Cookie，重启Laravel服务后重新测试即可。

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