Laravel使用Fruitcake CORS中间件返回带Cookie响应时CORS失效如何解决

问题原因 #

当跨域请求需要携带/设置Cookie时，需要同时满足服务端CORS配置、Cookie属性配置、前端请求配置三个维度的要求，缺少任意一项都会触发CORS错误。

需要补充的配置修改 #

1. 修正Laravel Cookie生成参数 #

你当前的Cookie设置缺少必要的同站策略、域名、路径配置，符合要求的写法如下：

// 参数顺序参考：Cookie::make(名称, 值, 有效期, 路径, 域名, 安全协议, httpOnly, 原始输出, 同站策略)
$access_cookie = Cookie::make(
    'access_token', 
    $access_token, 
    $cookieLife, 
    '/', // 路径统一设为根路径
    '.localhost', // 父域名匹配，适配前后端不同端口的同域场景
    true, // 开启secure，匹配你前端的https协议
    true, // 建议开启httpOnly，防止XSS窃取Cookie
    false,
    'none' // 跨域场景下SameSite必须设为none，同时必须配合secure=true使用
);

$refresh_cookie = Cookie::make(
    'refresh_token', 
    $refresh_token, 
    $MINUTES_IN_ONE_YEAR, 
    '/', 
    '.localhost', 
    true, 
    true, 
    false,
    'none'
);

注意：后续部署到线上正式环境时，需要把domain参数替换为你实际业务的根域名。

2. 优化cors.php配置 #

你当前的CORS配置基本符合要求，只需做3处微调：

return [
    // 去掉重复的通配符，只开放需要跨域的业务路径即可
    'paths' => ['api/*', 'oauth/*'],
    // 显式添加OPTIONS预检请求支持，凭证模式下不推荐用方法通配符
    'allowed_methods' => ['POST', 'GET', 'DELETE', 'PUT', 'OPTIONS'],
    'allowed_origins' => ['http://localhost:3000', 'https://localhost:3000'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    // 显式暴露Set-Cookie响应头，允许前端接收、存储Cookie
    'exposed_headers' => ['Set-Cookie'],
    // 把预检缓存时间设为1天，减少重复OPTIONS请求
    'max_age' => 86400,
    'supports_credentials' => true,
];

3. 前端请求添加凭证配置 #

React端发起请求时必须显式开启携带凭证的配置：

• 若使用axios：

  const request = axios.create({
    withCredentials: true
    // 不要手动设置Access-Control-Allow-Origin头，会触发CORS错误
  })
  

• 若使用原生fetch：

  fetch(请求地址, {
    credentials: 'include',
    // 其他请求参数
  })
  

排障参考 #

如果修改后仍然报错，可以按以下顺序排查：

• 打开浏览器控制台Network面板，查看OPTIONS类型的预检请求响应头，确认Access-Control-Allow-Credentials值为true，Access-Control-Allow-Origin为你前端的完整域名而非通配符
• 查看接口响应头的Set-Cookie字段有没有黄色警告，根据警告提示调整对应Cookie属性

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