React本地前端与线上PHP后端联调时，页面刷新后HttpOnly JWT Cookie消失的问题排查与解决咨询

嘿，我之前在跨域联调的时候也碰到过几乎一模一样的问题，折腾了好一阵才搞定，结合你的代码和场景，咱们来一步步捋清楚原因和解决办法：

可能的原因分析 #

1. Cookie的Domain属性缺失
   你现在的setcookie调用里没指定Domain参数，浏览器会默认把这个Cookie绑定到后端服务器的域名上。但你的前端是localhost:5173，属于完全不同的域，部分浏览器会把这种跨域Cookie标记为"第三方Cookie"，如果浏览器开启了阻止第三方Cookie的默认设置（现在很多浏览器默认开启），页面刷新后就会自动清除这个Cookie。

2. SameSite与Secure属性不匹配
   你设置了SameSite: 'Lax'，但如果你的后端是HTTPS协议的线上服务器，secure: false这个设置就有问题了——当SameSite设为Lax或Strict时，非Secure的Cookie在跨域场景下可能会被浏览器拒绝持久化存储。另外，跨域场景下如果要让Cookie能被跨域请求携带，有时候需要把SameSite设为None，但这必须同时开启secure: true，否则浏览器会直接忽略这个Cookie设置。

3. 前端请求未配置携带Credentials
   就算后端的Cookie设置没问题，如果你的前端请求（包括登录后的验证请求、页面刷新后发起的初始化请求）没有明确配置携带凭证，浏览器也不会在跨域请求里带上Cookie，后端返回未登录状态后，前端可能会误判为用户已退出，或者浏览器直接因为请求没有携带凭证而清除Cookie。

具体的解决步骤 #

1. 修正PHP的setcookie参数

把setcookie的配置补全，重点加上Domain和Path，同时根据后端的协议调整secure和SameSite：

setcookie('token', $token, [
    'expires' => time() + 3600 * 24,
    'httponly' => true,
    // 后端如果是HTTPS，必须设为true；如果是HTTP（不推荐线上用HTTP），设为false
    'secure' => true, 
    // 跨域场景下推荐设为None，配合secure: true
    'samesite' => 'None',
    // 设为后端的根域名，比如你的后端是api.example.com，就设为'.example.com'（注意前面的点，允许子域名共享）
    'domain' => '.your-backend-domain.com',
    // 设为'/'让整个后端域名下的接口都能访问这个Cookie
    'path' => '/'
]);

注意：如果你的后端是HTTP协议（线上环境强烈不建议），SameSite不能设为None，这时候可以尝试设为Lax，但部分浏览器可能还是会拦截。

2. 确保前端请求配置了携带凭证

不管你用的是Axios还是原生Fetch，都要明确开启携带跨域凭证的配置：

• Axios：可以全局配置，也可以在单个请求里设置

// 全局配置
axios.defaults.withCredentials = true;

// 或者单个请求
axios.post('/api/login', data, { withCredentials: true });

• Fetch API：在请求选项里加上credentials: 'include'

fetch('https://your-backend-domain.com/api/verify', {
  method: 'GET',
  credentials: 'include'
});

3. 检查浏览器的第三方Cookie设置

如果上面的配置都改了还是不行，去浏览器的设置里看看是否开启了"阻止第三方Cookie"，临时把这个设置关掉测试一下——如果关掉就正常了，说明你的SameSite和secure配置还没到位，再回头调整这两个参数。

额外的注意点 #

• 不要在Access-Control-Allow-Origin里用*，你现在已经设为具体的http://localhost:5173是对的，带Credentials的跨域请求必须指定具体的源，不能用通配符。
• 确保你的登录请求和刷新后发起的验证请求，都是从前端带了withCredentials/credentials: include的配置发送的，漏了任何一个都会导致Cookie无法正常携带。

内容来源于stack exchange