Laravel设置的Cookie无法存储到Vue前端的问题求助

1. Fetch请求中POST/PUT的Credentials被错误覆盖 #

你的fetch.js里，POST/PUT请求时会合并setupSavOrUpdateFetch配置，其中credentials: 'same-origin'直接覆盖了原本的credentials: 'include'。跨域场景下必须保持credentials: 'include'，浏览器才会接收并存储跨域Cookie。

修改方法：
删除setupSavOrUpdateFetch中的credentials配置，确保所有请求统一使用include：

// 原代码
const setupSavOrUpdateFetch = {
  cache: 'no-cache',
  credentials: 'same-origin', // 删除这行
};

// 修改后
const setupSavOrUpdateFetch = {
  cache: 'no-cache',
};

或者直接拆分配置，避免覆盖关键参数：

const finalSetupFetch = {
  ...setupFetch,
  ...(initMethod.value === 'POST' || initMethod.value === 'PUT'
    ? { cache: 'no-cache' } // 仅合并cache配置
    : {}),
};

2. CORS配置中allowed_origins通配符与supports_credentials冲突 #

当supports_credentials: true时，allowed_origins不能设为*，浏览器会直接拒绝处理跨域Cookie，必须指定前端的具体域名（含端口）。

修改cors.php：

'allowed_origins' => ['http://11.18.0.7:5173'], // 替换为你的Vue前端实际地址
// 禁止使用*，必须明确指定域名

3. 本地HTTP环境下Secure Cookie无法存储 #

你的Cookie设置了$secure = true（Laravelcookie函数第6个参数），如果是本地开发用HTTP协议（非HTTPS），大部分浏览器会拒绝存储带Secure属性的Cookie（仅部分浏览器对localhost例外）。

修改方法：
根据环境动态设置Secure属性，本地开发关闭，生产环境开启：

$accessTokenCookie = cookie(
    'access_token', 
    $token, 
    Auth::factory()->getTTL(), 
    null, 
    null, 
    env('APP_ENV') === 'production', // 生产环境才开启Secure
    true, 
    false, 
    'None'
);

$plainRefreshTokenCookie = cookie(
    'refresh_token', 
    $plainRefreshToken, 
    2880, 
    null, 
    null, 
    env('APP_ENV') === 'production', 
    true, 
    false, 
    'None'
);

4. 检查Cookie的Domain与Path设置 #

如果前后端域名/端口不同（比如前端localhost:5173、后端localhost:8000），需要显式设置Cookie的Domain和Path，确保前端能访问到：

$accessTokenCookie = cookie(
    'access_token', 
    $token, 
    Auth::factory()->getTTL(), 
    '/', // 允许所有路径访问
    'localhost', // 适配本地开发域名
    env('APP_ENV') === 'production', 
    true, 
    false, 
    'None'
);

$plainRefreshTokenCookie = cookie(
    'refresh_token', 
    $plainRefreshToken, 
    2880, 
    '/', 
    'localhost', 
    env('APP_ENV') === 'production', 
    true, 
    false, 
    'None'
);

验证步骤 #

1. 修改后重启Laravel服务和Vue项目
2. 发送登录请求，查看浏览器Network标签：
   • 确认响应头Set-Cookie字段无浏览器标记的Rejected状态
   • 检查Application标签的Cookie列表，确认是否已存储
3. 若仍有问题，查看浏览器控制台的CORS错误提示，针对性调整配置

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