Problem / Question with VUE Frontend and PHP Backend / Api Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Problem / Question with VUE Frontend and PHP Backend / Api without wasting too much if your time.

The question is published on by Tutorial Guruji team.

First of all sorry for my english, since its not my native language. Hope its clear enough.

We are developing a user system where the user, after login in, can do various things like joining events, changing his profile data, leave messages in a board so others users can read and answer to it, etc. The idea is to have two different “projects”, one for the backend ( already almost done as a CRUD Api using PHP ) and the frontend with VUE JS.

Both projects will be hosted on the same server so once its deployed we wont have any CORS or related problems.

At the moment the backend uses PHP Session ( could spend time changing the auth system if realy needed ) to know the user is loged in. Been testing with postman and everything seems to work as intended.

My problem comes on how to handle user sessions, to know the user is loged in etc during the development. Once the project is done and deployed on the same server, there would be no problem on using PHP Session or using JWT / Cookies. But during development, I see no way of testing the frontend without building it before because the API will be either on the server deployed already or localy on xampp, both ways giving me a lot of troubles because:

PHP SESSION: As the php session is domain exclusive, each request from the frontend to the backend, as long as they are not on the same server, will be taken as different sessions.

JWT: JWT Could be a solution but only if storing the token on localstorage, sessionstorage or a cookie that is not httponly because if i want the backend to set a httponly cookie with the token that cookie wont be available while in development because of different servers, not letting me test the frontend properly without building it and either deploying it to the host or copying it to xampp. About localstorage, sessionstorage or normal cookies, after reading a lot, i discarded them because of the security problems it can cause like XSS, CSRF, etc.

So summarizing, I would say the best idea would be to use the php session as both projects will be hosted together but I have no idea how I can test the frontend without having to build it and uploading it or moving the dist folder to xampp.

Thanks for your time and hope you can enlighten me


Setting the php response headers to allow credentials as Talal suggested on the comments:

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

On the axios call passing the param withcredentials: true

this.axios.get(URL, {withCredentials: true })

Would solve most of the CORS problems, the server would send the session cookie on the response, but still the browser would refuse to save the cookie because of the SameSite beeing unset (Chrome sets it to Lax as default ). Solved this with:

ini_set('session.cookie_secure', "1"); 
ini_set('session.cookie_httponly', "1"); 
We are here to answer your question about Problem / Question with VUE Frontend and PHP Backend / Api - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji