Laravel Breeze API与Sanctum CSRF Token Cookie问题求助

问题核心原因 #

• 域不匹配：Laravel用127.0.0.1:8000，前端用localhost:5173，浏览器将二者视为不同源，导致Cookie无法共享
• SESSION_DOMAIN配置矛盾：设置为localhost但Laravel运行在127.0.0.1，Cookie的domain属性不匹配被浏览器拒绝
• 未按流程获取CSRF Token：无Blade文件时，需先请求Sanctum专属端点获取Token，再发起登录请求

分步解决办法 #

1. 统一域配置（关键） #

修改.env文件，让Laravel和前端使用同源前缀：

APP_URL=http://localhost:8000
FRONTEND_URL=http://localhost:5173
SANCTUM_STATEFUL_DOMAINS=localhost:5173
SESSION_DOMAIN=localhost

注意：禁止混合127.0.0.1和localhost，浏览器会判定为不同域。

修改后执行缓存清除：

php artisan config:clear
php artisan cache:clear

2. 确认CORS配置有效性 #

你的cors.php配置已满足要求，重点确保supports_credentials保持true，这是允许跨域携带Cookie的核心开关。

3. React端按流程发起请求 #

无Blade时，必须先请求/sanctum/csrf-cookie获取Token Cookie，再发起登录请求。Axios示例代码：

import axios from 'axios';

// 全局配置
axios.defaults.baseURL = 'http://localhost:8000';
axios.defaults.withCredentials = true; // 必须开启，否则不会携带Cookie

// 登录函数
async function login(email, password) {
  try {
    // 第一步：获取CSRF Token Cookie
    await axios.get('/sanctum/csrf-cookie');
    
    // 第二步：提交登录数据
    const response = await axios.post('/login', {
      email,
      password
    });
    
    console.log('登录成功', response.data);
  } catch (error) {
    console.error('登录失败', error.response?.data || error.message);
  }
}

4. Postman测试要点 #

• 先发送GET请求到/sanctum/csrf-cookie
• 在Headers中添加X-XSRF-TOKEN，值为Cookie里的XSRF-TOKEN内容
• 开启Postman的"Send cookies"选项，再发起登录POST请求

验证步骤 #

1. 重启Laravel服务：php artisan serve
2. 启动React项目，打开浏览器控制台
3. 查看Application -> Cookies -> localhost:8000，确认XSRF-TOKEN和session cookie已生成
4. 发起登录请求，检查是否返回200状态码

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