React使用Axios请求PHP时SESSION数据跨脚本传递失败求助

问题描述 #

我有两个PHP文件：signin.php中创建$_SESSION，check-auth.php尝试获取Session值。但在React中通过Axios请求时，check-auth.php始终返回“not value”。测试发现signin.php内输出$_SESSION['id']正常，使用header跳转可传递Session数据，但Axios请求时Session数据丢失。

相关代码 #

signin.php

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With");
header("Access-Control-Allow-Credentials: true");

session_start();
    
$_SESSION['id'] ='value1';
$_SESSION['email'] = 'value1';
session_write_close();

$response = [
  'success' => true,
];

header('Content-Type: application/json');
echo json_encode($response);
//header('Location: http://project/vendor/check-auth.php')
?>

check-auth.php

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With");
header("Access-Control-Allow-Credentials: true");

session_start();

if (isset($_SESSION['id'])) {
  $response = [
    'id' => $_SESSION['id'],
    'email' => $_SESSION['email'],
  ];
} else {
  $response = [
    'id' => 'not value',
    'email' => 'not value'
  ];
}

header('Content-Type: application/json');
echo json_encode($response);
?>

React请求代码

1. 提交请求：

const handleSubmit = async (event) => {
  event.preventDefault();
  const data = new FormData(event.target);
  try {
    const response = await axios.post('http://project/vendor/signin.php', data);
    console.log(response.data);
    if (response.data.success){
      
    }
  } catch (error) {
    console.error(error);
  }
}

2. 验证请求：

useEffect(() => {
  axios.get('http://project/vendor/check-auth.php')
    .then(response => {
      console.log(response.data);
      // setUser(response.data.email);
    })
    .catch(error => {
      console.log(error);
    });
}, []);

解决方案 #

1. 修正后端跨域Origin配置 #

当开启Access-Control-Allow-Credentials: true时，Access-Control-Allow-Origin不能使用通配符*，必须指定前端的具体域名（比如你的React项目运行在http://localhost:3000）。修改两个PHP文件的对应header：

// 替换为你的前端实际域名
header('Access-Control-Allow-Origin: http://localhost:3000');

2. Axios请求开启Cookie携带 #

在所有需要传递Session的Axios请求中添加withCredentials: true，让浏览器自动携带Session ID对应的Cookie：

• 提交请求修改：

const response = await axios.post('http://project/vendor/signin.php', data, {
  withCredentials: true
});

• 验证请求修改：

axios.get('http://project/vendor/check-auth.php', {
  withCredentials: true
})

3. 可选：检查PHP Session配置（若仍有问题） #

• 打开php.ini，确认session.cookie_domain设置正确，跨域场景下可设置为父域名（比如你的后端域名是project.com，前端是app.project.com，则设置为.project.com）。
• 确保session.cookie_httponly不影响（即使开启，浏览器仍会在请求中携带Cookie，只是前端JS无法读取）。

原因说明 #

跨域请求中，浏览器默认不会携带Cookie。只有同时满足以下三个条件，Session ID才能在请求间传递：

• 后端明确允许Credentials并指定具体Origin；
• 前端请求开启withCredentials；
• 浏览器支持并允许跨域Cookie携带。

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