Session cookie not being preserved in the browser

Question

I'm reaching out to you today because I'm facing an issue on my website that is preventing me from making requests using session cookies. Let me explain the situation in detail.

I host my website with a web host at the following address: https://www.coopratings.fr/. To test, you can log in with the username "a@a" and the password "a" and post a game with the "+" button in the navbar.

When a user wants to perform an action on my site, a request is sent to the server, which checks if the user is logged in using the "session_start()" function and the "_SESSION["isLogged"]" variable.

The problem is as follows: on some machines, the "phpsessid" cookie is preserved between requests, which allows the proper functioning of the login verification system. But on other machines, the "phpsessid" cookie changes with each request, which prevents the system from working correctly.

Upon analyzing the problem, I noticed that every time the browser sends an "OPTIONS" request before a "POST" request, the "phpsessid" cookie changes, and I don't see it stored in the "Storage -> Cookies" section of the browser's "F12" tab.

Furthermore, when I host my site locally with XAMPP using the URL 127.0.0.1/mysite/...", everything works correctly. However, when I use phpStorm to display the page, it uses the URL "http://localhost:63342/mySite/...", and the browser sends "OPTIONS" requests (which causes the same problem as mentioned earlier).

When I'm logged locally with localhost:63342/mySite/...", the response displays "You are not logged in," as I have configured it for cases of logged-out POST requests.

On the other hand, when I log in to the address coopratings.fr, the console displays the following errors:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.coopratings.fr/Rest_API/...e_reviewid.php. (Reason: header 'content-type' is not allowed according to header 'Access-Control-Allow-Headers' from CORS preflight response)."

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.coopratings.fr/Rest_API/...e_reviewid.php. (Reason: CORS request did not succeed). Status code: (null)."

"Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource."

I have done extensive research on the internet and have tried different solutions, but so far, I have not been able to resolve the issue. Here's what I have tried so far:

• Handling "OPTIONS" requests in my PHP files by adding the following code:

if (
    isset($_SERVER['REQUEST_METHOD'])
    && $_SERVER['REQUEST_METHOD'] === 'OPTIONS'
) {
    exit();
}

• Modifying the response headers with the following configurations:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, OPTION');
header('Access-Control-Allow-Headers: Access-Control-Allow-Headers,Content-Type,Access-Control-Allow-Methods, Authorization, X-Requested-With, Accept, Cookie');
header('Access-Control-Allow-Credentials: true');

• Add the "mode: 'cors'" and "credentials: 'include'" parameters to the requests (not at the same time).

• Modify the cookie parameters during session creation:

public static function startSession(){
    $maxlifetime = 3600;
    $secure = true;
    $httponly = true;
    $samesite = 'None';

    if(PHP_VERSION_ID < 70300) {
        session_set_cookie_params($maxlifetime, '/; samesite='.$samesite, $_SERVER['HTTP_HOST'], $secure, $httponly);
    } else {
        session_set_cookie_params([
            'lifetime' => $maxlifetime,
            'path' => '/',
            'domain' => $_SERVER['HTTP_HOST'],
            'secure' => $secure,
            'httponly' => $httponly,
            'samesite' => $samesite
        ]);
    }

    session_start();
}

• Here's how I send my requests:

let url = new URL('http://127.0.0.1/coopratings/Rest_API/api/');

return fetch(url + request, {
    method: type,
    body: body,
    headers: {
        "Content-Type": "application/json",
    }
})
.then(res => {
    return res.json();
})

Hoping to find a solution to this issue. Thank you in advance for your help.

Answer 1

Ok, I've found the solution. Make sure to request the same origin. For me, it was that I've forgotten the www. And allow credentials in your request