0

I have just started working with react js and started facing some issue from some client side systems. while posting data to a php file from react js with (axios or ajax) session_id() resetting and regenerating on every request/call. also session variable resetting. i have tried some solutions from stackoverflow but nothing worked.i have faced this issue from my localhost and some other systems. but working with some others systems too. it's like working with 50% system and not working with 50% system.

But if i do this same thing without react js from normal html file with ajax to php file. session id is not resetting or regenerating.

PHP FILE

<?php
session_start();
$session_val = session_id();
 header("Access-Control-Allow-Origin: *");

echo $session_val;

?>

AJAX CALL FROM REACT JS

$.ajax({
        url: "http://localhost/test.php",
        type: "POST",
        data: {
          action: action,
        },
        success: function (data) {
        },
        error: function (jqXHR, text, errorThrown) {
          console.log(jqXHR + " " + text + " " + errorThrown);
        },
      });

AXIOS CALL

    axios
    .post('http://localhost/test.php', this.state)
    .then(response =>{
        console.log(response.data);

    })
    .catch(
     error => {
        console.log(error)
    });
Dipranil
  • 9
  • 7
  • 1
    This may be a typo, but your URLs in the React and Axios calls are using different schemes (React is HTTP and Axios HTTPS), which would have different sessions. – benJ Aug 17 '20 at 06:01
  • sorry it's a typo, it doesn't work with http and https.i have checked with both – Dipranil Aug 17 '20 at 06:25
  • Did you check if the current session id is sent as a part of the cookies in your request header? – Shreyas Sreenivas Aug 17 '20 at 06:55
  • @ShreyasSreenivas could you please elaborate how to check that ? are you asking about below screenshot ? https://www.screencast.com/t/4vtxrEchbw – Dipranil Aug 17 '20 at 07:14
  • The screenshot you sent shows the response from the server. I'm referring to the cookies header in the request sent by client. In the screenshot you sent, go to the headers tab. Check if theres a header named cookie in the request headers. You can refer to https://www.screencast.com/t/dkgd85sfo5HX – Shreyas Sreenivas Aug 17 '20 at 07:43
  • It would also be helpful if you could you also share the screenshot of your Request headers – Shreyas Sreenivas Aug 17 '20 at 07:53
  • @ShreyasSreenivas there is no "Cookie" name headers in request headers. screenshot : https://www.screencast.com/t/tIExOt0Fh4g2 – Dipranil Aug 17 '20 at 07:58
  • That's weird, browsers send the cookies as a header automatically with every request. Looks like you would have to add it manually. I'll post the full solution in 5-10 minutes. – Shreyas Sreenivas Aug 17 '20 at 08:10

2 Answers2

0

Looks like your browser isn't sending the Cookie header with the AJAX request (they do this by default, but I can't figure out why it's not sending it).

When your PHP server sees that there's no Cookie header, it assumes that the SESSONID is not set and creates a new one and instructs your client to store the new SESSIONID in its cookies. Since this new SESSIONID is not sent in the next request, your server again assumes the same thing, and again creates a new SESSIONID. And this process happens everytime.

To learn more about how cookies work, you could refer Using HTTP Cookies.

You can manually get your cookies and add it as a Header to your AJAX request in JQuery like so:

$.ajax({
        url: "http://localhost/test.php",
        type: "POST",

        headers: {"Cookie": document.cookie},

        data: {
          action: action,
        },
        success: function (data) {
        },
        error: function (jqXHR, text, errorThrown) {
          console.log(jqXHR + " " + text + " " + errorThrown);
        },
      });

headers attribute of the AJAX object is used to add extra headers to your HTTP Request. Here we're getting the cookies the browser has stored using document.cookie and adding it to the Cookie header in the request headers.

Let me know if this solves your issue.

Shreyas Sreenivas
  • 331
  • 1
  • 5
  • 12
  • As per your instruction i have added "headers: {"Cookie": document.cookie}" but still no use. i don't see cookie in Request headers also it's keep generating new session id. – Dipranil Aug 17 '20 at 09:06
  • Can you check if theres a cookie named PHPSESSID in your Cookies like https://www.screencast.com/t/IoI8gHy0qO – Shreyas Sreenivas Aug 17 '20 at 09:12
  • Please check the below screenshots, i hope it will help you. Storage Screenshot: https://www.screencast.com/t/9ZxXH9t3PBa Error Screenshot: https://www.screencast.com/t/1BQUZtYFvj Code Screenshot: https://www.screencast.com/t/3sYdBp6QpPQ – Dipranil Aug 17 '20 at 09:59
  • It looks like the session ID is not being added to your cookies. Can you try running your website in another browser? Also, remove the headers attribute, as the Cookie header is apparently reserved and only the browser can set it. – Shreyas Sreenivas Aug 17 '20 at 10:17
  • Just tried with Firefox, screenshot : https://www.screencast.com/t/bMpGpBCijJ – Dipranil Aug 17 '20 at 11:06
  • Can you share the screenshot of the cookies in firefox? – Shreyas Sreenivas Aug 17 '20 at 12:42
  • Cookie section Screentshot in firefox : https://www.screencast.com/t/l6GEXyXXY0U5 – Dipranil Aug 17 '20 at 12:51
  • I meant the cookies under the application tab like https://www.screencast.com/t/IoI8gHy0qO – Shreyas Sreenivas Aug 17 '20 at 15:36
  • Screenshot : https://drive.google.com/file/d/1-EWTbMsyMw2vI9ljGAnhxUHnDhYMZ6WA/view?usp=sharing – Dipranil Aug 17 '20 at 17:36
  • It seems theres something that's preventing your browser from setting cookies, either in your application or in Jquery. Try adding `crossDomain: true` and `xhrFields: { withCredentials: true }` to your ajax request. – Shreyas Sreenivas Aug 18 '20 at 04:40
  • Thank you for ajax it worked with xhrFields: { withCredentials: true } , but how can i send that cookie value for axios post request ? – Dipranil Aug 18 '20 at 09:30
  • I just used following code and worked for axios too, thank you very much shreyas for helping me on this.i really appreciate your efforts. Screenshot : https://www.screencast.com/t/r0xf8RDn – Dipranil Aug 18 '20 at 12:18
  • Shreyas This is the error i'm receiving now : https://www.screencast.com/t/z4kYytOJ – Dipranil Aug 18 '20 at 14:29
  • No problem! I didn't know you were sending the request from another host, turns out the entire problem was there! Check out https://stackoverflow.com/questions/2870371/why-is-jquerys-ajax-method-not-sending-my-session-cookie. The answers there should help you further. – Shreyas Sreenivas Aug 18 '20 at 17:32
  • No, i wasn't sending the request from another host. it was under same host – Dipranil Aug 18 '20 at 19:04
  • Yes, Different Ports – Dipranil Aug 20 '20 at 09:10
0

As per Shreyas Sreenivas comment i used xhrFields: { withCredentials: true } for ajax and

axios.post('https://example.com/file.php', this.state,{withCredentials: true}); for axios and it worked. But some Cross-Origin Request Blocked error occurred which needs to be fixed.

Dipranil
  • 9
  • 7