React对接Laravel Sanctum认证时Set-Cookie无法写入浏览器问题排查

问题根因 #

• Axios参数位置错误：你当前的withCredentials配置写在了then方法的参数位，axios.get的语法是axios.get(url[, config])，正确的配置应该放在第二个参数位，你写的位置完全不生效，导致请求没有携带跨域凭证标识，浏览器直接拒绝写入返回的Cookie。
• Laravel端信任域名未配置：需要在环境变量中配置前端域名到Sanctum可信任域名列表和Session作用域中，否则浏览器会因为Cookie归属域名不匹配拒绝写入。
• CORS配置不规范：如果cors.php中allowed_origins使用通配符*，即使开了supports_credentials也会被浏览器拦截跨域凭证请求。
• Cookie属性不符合浏览器要求：默认Laravel生成的Cookie如果开启了secure属性，或者SameSite属性不符合跨域场景要求，会被浏览器直接拦截。

具体解决方案 #

1. 修正React端Axios请求代码 #

优先全局配置Axios避免每次重复写配置：

// 全局配置，放在Axios初始化位置
axios.defaults.withCredentials = true;
axios.defaults.baseURL = 'http://www.react.test/api';

// 后续请求直接写相对路径即可
axios.get('/csrf-cookie').then(response => {
  console.log(response);
});

如果仅需要单次配置，写对参数位置即可：

axios.get('http://www.react.test/api/csrf-cookie', {
  withCredentials: true
}).then(response => {
  console.log(response);
});

2. 修正Laravel端配置 #

首先修改项目根目录.env文件，添加/修改以下配置：

# 配置Session作用域，前面加.匹配所有子域名，无次级域名可直接写react.test
SESSION_DOMAIN=.react.test
# 配置Sanctum信任的前端域名，必须带上端口号
SANCTUM_STATEFUL_DOMAINS=localhost:3000
# 开发环境用http协议，关闭Cookie的secure校验，生产环境用https时改为true
SESSION_SECURE_COOKIE=false
# 开发环境SameSite设为lax即可，生产环境https跨域场景下改为none
SESSION_SAME_SITE=lax

然后检查config/cors.php配置，确认以下配置正确：

return [
    // api/*已经覆盖了csrf-cookie和所有api接口，不需要单独加其他路径
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    // 必须明确写前端域名，禁止用*，否则跨域凭证不生效
    'allowed_origins' => ['http://localhost:3000'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

修改完配置后执行命令清Laravel缓存：

php artisan config:clear
php artisan route:clear

3. 验证注意事项 #

• 不要用浏览器无痕模式测试，部分无痕模式默认阻止第三方Cookie
• 测试时打开浏览器控制台Network面板，查看/api/csrf-cookie请求的Response Headers是否存在Set-Cookie字段，再到Application>Cookies面板筛选react.test域名查看Cookie存储情况。

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