Run Webpack based Website and XAMPP apache/php on

Question

I'm running my website inside ZURB Foundation 6.4 project (ZURB Template). This runs on webpack4, Babel7 and gulp (ask taskrunner).

I want to allow persistence for user sessions (Login functionality) and therefore want to use the $_SESSION array in my php backend. My Backend is the most recent, no-install XAMPP version.

Now I got my backend to create session files inside my session folder in /src/assets/Session. These files are filled with data, but since the Session Cookie isnt sent from client to server, the server cant access the session files. I get the following error echoed to my front-end and then displayed in my browser console:

<br />
<b>Notice</b>:  Undefined index: loggedUserID in <b>D:\foundationtests\src\assets\php\test3.php</b> on line <b>20</b><br />

You can see more details on this problem and how I already tried to solve it here: SessionID is not communicated between Client/Server in webpack4 project with php/apache backend

So far I think that the problem is that my backend runs on localhost:8099 while my frontend runs on localhost:8000. I assume that firefox fails at sending the corresponding session id to a different origin.

I did allow CORS on the port where my frontend/website resides, here is the line I added to httpd.conf of apache:

Header set Access-Control-Allow-Origin "http://localhost:8000"

I also have the following files A and B in php, which execute the code for setting and getting the values of the $_SESSION array:

File A.php, setting the value:

Header("Access-Control-Max-Age: 360");
Header("Access-Control-Allow-Credentials: true");
Header("Access-Control-Allow-Methods: *");
Header("Access-Control-Allow-Headers: Origin");
Header("Access-Control-Expose-Headers: Access-Control-Allow-Origin");


session_start();

$test = $_SESSION["loggedUserID"];

echo $test;

File B.php:

Header("Access-Control-Max-Age: 360");
Header("Access-Control-Allow-Credentials: true");
Header("Access-Control-Allow-Methods: *");
Header("Access-Control-Allow-Headers: Origin");
Header("Access-Control-Expose-Headers: Access-Control-Allow-Origin");


session_start();

$_SESSION["loggedUserID"] = 2;

echo $test;

Despite this configuration, the cookie is not stored and transmitted as desired. Therefore, I thought I'd give it a try to run both backend and frontend on the same port. However, when I start my apache on port 8000 while my website is running on port 8000, the website crashes. When I start my website after apache has already started running on 8000, then my website automatically switches to port 8001. I've read that running both front and backend on the same port shall be possible, but I dont know how to accomplish that, especially inside (webpack based) ZURB Foundation project.