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

Question

I am aware other questions like this one exist, i have failed to implement any of those successfully, meaning none have worked, whether due to a fault of my own or their inherent impotency to solving this problem.

The environment :

I am serving the php project with php -S 127.0.0.1:8080 and have a react front end started on the default port (3000) with npm start. I am using axios for making the request to the server.

The relevant code :

I have 2 files that really matter :

LoginPage.js is where my react code is, I am making 2 requests, the first one is to mimic authentication and start the session and the second request is to check if the session is still alive:

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 is where my php code is :

    <?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);
    }
    
     ?>

The problem :

My problem is that, while the first request authenticates no problem :

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

The second request does not find a live session :

you are not logged in

Tried Solutions/Debugging :

I have tried many solution, including setting withCredentials: false and true. Setting it to true causes a Cors error. I have added and removed all kinds of headers from the php file (some for Cors, and some to try to solve this problem) :

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");

I have tried postman and sending a request to start the session, then another to check if it is alive works just fine :

First request :

Second request :

My first guess is that either the session cookie is not being stored properly on the first request, or that it isn’t being sent on the second request. Can you try using the `withCredentials` or similar from these answers: https://stackoverflow.com/a/43178070/231316 — Chris Haas, Jul 08 '21 at 12:02
Did you set `withCredentials` to true for _both_ requests? I does not only specify whether cookies are send back with cross-domain requests, it also determines whether the browser will accept a _received_ cookie in the first place. — CBroe, Jul 08 '21 at 12:11
I did, but setting withCredentials to true causes a Cors error. — coderdonezo, Jul 08 '21 at 15:57

score 1 · Accepted Answer · answered Jul 09 '21 at 11:47

I found the solution. A detailed explanation can be found in this article about Cors. The relevant part is in the Credentials and Cors section. The short answer is that you have to set the withcredentials flag to true, which will cause a Cors error issue, which you can then fix by adding the appropriate headers in the backend :

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

So this is how my pages look now that everything is working fine :

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);
 }

  ?>

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

1 Answers1