Vue+PHP跨服务器部署时登录Session丢失问题及Cookie处理咨询

问题核心原因 #

你遇到的Session丢失问题，根源是跨域请求中Credentials（Cookie/Session ID）的传输限制，结合你的代码来看，主要有两个关键错误：

1. Access-Control-Allow-Origin: * 与 credentials: include 冲突——浏览器安全机制规定，当请求携带Credentials时，后端不能使用通配符*作为允许的源，否则浏览器会直接阻止Cookie的传输。
2. 未明确配置PHP Session Cookie的跨域兼容参数，导致前端localhost:8080无法正确识别并携带Session ID Cookie。

具体解决步骤 #

1. 修正后端CORS头部配置

将通配符*替换为前端具体的源地址，并添加Access-Control-Allow-Credentials: true，同时处理OPTIONS预检请求：

// main.php头部修改
$allowedOrigin = 'http://localhost:8080';
header("Access-Control-Allow-Origin: $allowedOrigin");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");
header("Access-Control-Allow-Credentials: true"); // 必须开启，允许携带Cookie
header("Content-Type: application/json");

// 处理OPTIONS预检请求（浏览器跨域带Credentials时会先发OPTIONS）
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}

2. 配置PHP Session Cookie的跨域兼容参数

在session_start()之前，设置Session Cookie的Domain、SameSite等属性，确保前端能正确获取并携带：

// 在session_start()之前执行
session_set_cookie_params([
    'lifetime' => 3600, // Session有效期，按需调整
    'path' => '/', // 允许所有路径访问Cookie
    'domain' => 'localhost', // 匹配主域，不要加端口
    'secure' => false, // 本地HTTP环境设为false，生产HTTPS环境设为true
    'httponly' => true, // 防止XSS窃取Cookie，提升安全性
    'samesite' => 'Lax' // 跨域场景下Lax兼容性更好，HTTPS环境可设为None（需配合secure=true）
]);
session_start();

3. 确认前端fetch配置正确性

你当前的credentials: include设置是正确的，确保所有需要携带Session的请求都保持这个配置，同时请求的后端地址必须是完整的绝对路径（比如http://localhost/xxx.php）。

关键注意事项 #

• 跨域场景下绝对禁止使用Access-Control-Allow-Origin: *，必须指定具体的前端源，否则Credentials无法生效。
• Cookie的SameSite属性：如果是跨域请求，避免设为Strict，否则浏览器会在跨域跳转时阻止Cookie传输。
• 本地开发时，确保前端和后端的主域名一致（都是localhost），端口不同不影响，但Cookie的Domain不能加端口号。

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