No session cookies on localhost apache with vue (axios)

Please bare in my that I am no web expert and this was my first vue project (just intranet), but this is my problem:

I combined an apache backend (PHP) with vue in combination with axios.
The authentification works with a purely PHP generated form.
This creates a session id on the apache server and I add some session variables storing user id, access rights etc. Then - if successful - php calls the vue app.
Then vue (or to be precise my vue generated JS) calls php scripts which check for my session variables before the return the data to the browser (depending on access rights) etc.
And… it works like a charm!

Problem is: It does not work in my development environment with my apache (XAMPP) running on localhost. And I have no clue why.

Appache runs on port 80
Node js runs on port 8080
I am not sure whether the node server matters at all since it only generates JS code which runs in my browser (as far as I understand correctly).

I debugged my php code with Xdebug and this clearly shows that:
My login form creates a session id, so this works as long as php is concerned.
But as soon as vue (axios) calls any other php code

  1. the session id is gone
  2. no new session id is created (which is something I would expect with any call of php code if no session id was found)

So no sessions on localhost with vue/axios?

I read about setting the axios option “withCredentials: true” which did not help at all (and I don’t even have any idea what that option means).
I am just wondering whether my vue-development-server (node js) is involved somehow. Is node js eventuelly calling my php scripts and I have some cross-domain issue?

By the way: I have a second SPA written in vanilla JS with standard AJAX requests and here I don’t have any issues with cookies on my localhost apache server.

OK - so that was partially my mistake.
The axios setting does make a difference:

axios.defaults.withCredentials = true

Now the session id cookie is there and the php script has access to all session variables.

But no data is returned and I get a “Cross - Origin Read Blocking” warning in my Firefox browser.
What can I do?

Hi

I think the problem is that the page comes from localhost:80 and talks to the API at localhost:8080. This is the problem because they are two different servers.

In vue.config.js can you set that all traffic to a certain path is forwarded to another address
So the browser thinks it is the same server. See here https://cli.vuejs.org/config/#devserver-proxy

I already had added this to my vue.config.js:

    devServer: {
      proxy: 'http://localhost:80'
    }

But it shows no effect.
I also tried to set up some nonsense URL, and nothing changes. The JSON data arrives at my browser, and the browser refuses to open them because of the CORB problem.

I finally managed to make it work.

Step 1: Send the axios request in VUE (i.e. JS) with credentials e.g. like this

import axios from 'axios';
axios.defaults.withCredentials = true;

Step 2: In PHP set the allow-credentials header to true as well

header('Access-Control-Allow-Credentials: true');

The reason for this is.
" For a CORS request with credentials, in order for browsers to expose the response to frontend JavaScript code, both the server (using the Access-Control-Allow-Credentials header) and the client (by setting the credentials mode for the XHR, Fetch, or Ajax request) must indicate that they’re opting in to including credentials."

Still - the proxy setting in the vue.config.js seems to have no effekt on this. My code works no no matter whether the devServer proxy is set or not.

Hm. Another way you could do it is to use Apache as a reverse proxy so all access on some path on Apache gets forwarded to localhost:8080

See here https://httpd.apache.org/docs/2.4/howto/reverse_proxy.html

Now finally I found the reason for my whole proxy problem.

I had set up a environmental variable in vue, or to be precise one variable valid in development mode and one for production (with two files “.env.development” and “.env.production”).

Now this variable VUE_APP_PATH was used as a prefix in every api call with axios. And this variable was in development mode set to “http://localhost:80”.
So I was sort of bypassing any proxy.
THis must have been something I got from some tutorial or web post…and since I wrote the code one year ago, I did not remember this “trick”.

Now I removed the prefix variable from my axios calls and all axios “with credentials” options and all php credential headers and:
the proxy works now just fine.

But thanks for your help johan. I learned a lot about the webpack dev server in the last 48 hours :wink:

1 Like