React - axios Post response has no Cookie

Christian Walter — Mon, 10 Oct 2022 05:40:59 +0000

Hello everyone,
I am currently working with React for the frontend and Symfony PHP framework for the backend. Now I am trying to log in to the backend via React with a post request. This all works very well so far. I get a 204 code and I am then logged in. About Postman, with the same request, I get as a response a cookie for the session-based authentication. About PHP and cURL I got in the response from the backend a cookie

The response by cURL looks like this:

{'Date': 'Sat, 08 Oct 2022 10:14:45 GMT', 'Server': 'Apache', 'Cache-Control': 'max-age=0, must-revalidate, private', 'Link': '<http://127.0.0.1:8000/api/docs.jsonld>; rel="http://www.w3.org/ns/hydra/core#apiDocumentation"', 'X-Debug-Token': 'cca986', 'X-Debug-Token-Link': 'http://127.0.0.1:8000/_profiler/cca986', 'X-Robots-Tag': 'noindex', 'Expires': 'Sat, 08 Oct 2022 10:14:45 GMT', 'Content-Encoding': 'gzip', 'Vary': 'Accept-Encoding', 'Set-Cookie': 'PHPSESSID=2606e8ab1c7ded0d30bb61890f4a6ea0; path=/; secure; httponly; samesite=lax', 'Location': '/api/users/11', 'Keep-Alive': 'timeout=5, max=100', 'Connection': 'Keep-Alive'}

PHP Code:

$curl = curl_init();
curl_setopt_array($curl, array(
    CURLOPT_URL => 'http://127.0.0.1:8000/login',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HEADER => true,
    CURLOPT_FOLLOWLOCATION => true,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_POSTFIELDS =>'{
        "email": "webmaster",
        "password": "123456"
    }',
    CURLOPT_HTTPHEADER => array(
        'Content-Type: application/json',
    ),
));
$response = curl_exec($curl);

As soon as I don't use in the cURL variant the option "CURLOPT_HEADER => true," the cookie and the detailed response are no longer displayed.

Now I have tried all options to get the cookie also in React and Axios in the header, unfortunately it is not possible for me even remotely somehow to get a cookie or other response from the backend. Here is the code I am currently using.

let data = {email:"webmaster", password:"123456"}
let headers = {
  headers: {'Content-Type': 'application/json'}
};


const axiosConfig = {
  headers: {
    'content-Type': 'application/json',
    "Accept": "/",
    "Cache-Control": "no-cache",
    "Access-Control-Allow-Origin": "*",
    // "Cookie": document.cookie
  },
  credentials: "same-origin"
};
axios.defaults.withCredentials = true;
const res = await axios.post('http://127.0.0.1:8000/login', data, axiosConfig)
    .catch(response =>{
      console.log(response.getAll());
})

Unfortunately I don't know if I forgot anything in the post request or if Axios is not the best for such a request.

I am just surprised that in Postman and via PHP there are no problems to get a cookie. Unfortunately, I have only recently started working with ReactJS and have very little experience in this area.

On the weekend I tried it also with python and there were also no problem. So I think it is a problem of my ReactJS code.

Thanks a lot for your help!

Best, Christian

DEV Community: Christian Walter

React - axios Post response has no Cookie