从与 axios 调用的反应开始 php session 并不能使 session 保持活动状态，但是用邮递员来做就可以了

Question

我知道存在其他类似的问题，我没有成功实施任何一个，这意味着 none 已经奏效，无论是由于我自己的错误还是他们解决这个问题的内在无能.

环境：

我正在使用 php -S 127.0.0.1:8080 服务于 php 项目，并使用 npm start 在默认端口 (3000) 上启动了一个反应前端。我正在使用 axios 向服务器发出请求。

相关代码：

我有 2 个文件非常重要：

LoginPage.js 是我的反应代码所在的位置，我正在发出 2 个请求，第一个是模拟身份验证并启动 session，第二个请求是检查 session 还活着：

useEffect(() => {
    axios({
      method: "get",
      url: "http://localhost:8080/phpfolder/test1page.php?username=username",
      dataType: "JSON",
    })
      .then((response) => {
        console.log("response here", response.data);
        setUserName(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  useEffect(() => {
    if (userName !== "") {
      axios({
        method: "get",
        url: "http://localhost:8080/phpfolder/test1page.php",
        dataType: "JSON",
      })
        .then((response) => {
          console.log("response here", response.data);
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }, [userName]);

test1page.php 是我的 php 代码所在的位置：

    <?php 
     session_start();
     header("Access-Control-Allow-Origin: *");
     header('Access-Control-Allow-Headers: Content-Type');
    
     if (isset($_GET['username'])) {
        $_SESSION['username'] = $_GET['username'];
        // echo  $_SESSION['username'];
     }
    
     if(!isset($_SESSION['username'])){
        echo 'you are not logged in';
    }else{
        echo 'you are logged in';
        header('Content-type: application/json');
        echo json_encode($_SESSION);
    }
    
     ?>

问题：

我的问题是，虽然第一个请求验证没有问题：

you are logged in{"username":"username"}

第二次请求没有找到live session :

you are not logged in

试过Solutions/Debugging:

我尝试了很多解决方案，包括设置withCredentials: false和true。将其设置为 true 会导致 Cors 错误。我在 php 文件中添加和删除了各种 headers （一些用于 Cors，一些用于尝试解决此问题）：

header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Origin: http://localhost:3000");
header('Access-Control-Allow-Origin: *'); 
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Disposition, Content-Type, Content-Length, Accept-Encoding");
header("Content-type:application/json");
header("connection:keep-alive");

我试过邮递员并发送一个请求来启动 session，然后另一个来检查它是否还活着，工作正常：

第一个请求：

第二个请求：

Answer 1

我找到了解决方案。关于Cors的详细解释可以在this article中找到。相关部分位于 Credentials and Cors 部分。简短的回答是您必须将 withcredentials 标志设置为 true，这将导致 Cors 错误问题，然后您可以通过在后端添加适当的 headers 来修复该问题：

header("Access-Control-Allow-Origin: http://localhost:3000");
header("Access-Control-Allow-Credentials: true");

这就是我的页面现在的样子，现在一切正常：

LoginPage.js :


    useEffect(() => {
        axios({
          method: "get",
          url: "http://localhost:8080/phpfolder/test1page.php?username=username",
          dataType: "JSON",
          withcredentials: true
        })
          .then((response) => {
            console.log("response here", response.data);
            setUserName(response.data);
          })
          .catch((error) => {
            console.log(error);
          });
      }, []);
    
      useEffect(() => {
        if (userName !== "") {
          axios({
            method: "get",
            url: "http://localhost:8080/phpfolder/test1page.php",
            dataType: "JSON",
            withcredentials: true
          })
            .then((response) => {
              console.log("response here", response.data);
            })
            .catch((error) => {
              console.log(error);
            });
        }
      }, [userName]);

test1page.php :

 <?php 
  session_start();
  header("Access-Control-Allow-Origin: http://localhost:3000"); // cannot be a wildcard, you have to specify the name of the domain making the request here.
  header('Access-Control-Allow-Headers: Content-Type');
  header("Access-Control-Allow-Credentials: true"); // add this header

  if (isset($_GET['username'])) {
     $_SESSION['username'] = $_GET['username'];
     // echo  $_SESSION['username'];
  }

  if(!isset($_SESSION['username'])){
     echo 'you are not logged in';
 } else {
     echo 'you are logged in';
     header('Content-type: application/json');
     echo json_encode($_SESSION);
 }

  ?>

从与 axios 调用的反应开始 php session 并不能使 session 保持活动状态，但是用邮递员来做就可以了

Starting a php session from react with an axios call does not keep the session alive, but doing it with postman works just fine

javascript

php

session

reactjs

axios