[Vuejs]-Problem sending/storing session cookie with Vue Axios (CORS)

by

3👍

✅

Here’s what’s happening. You send a post request to login, your server creates a session and sets a cookie on the client, but in your case the client is not the browser but the xhr object(created by axios) which will soon be wiped out, as a result your browser does not know about the session thus it does not save the sessionId therefore there are no credentials to send along with future requests.
To solve this you have the following options.

  1. Try to submit your form as is, without using axios or any javascript. Set method="post" and action="<url_to_login_endpoint> attributes on your form and let it go nuts. Your submission will be handled by the browser and it will save the sessionID.
  2. Look into token based authentication for your backend(I don’t know flask so I don’t know how that would work), this would be a complete SPA and stateless solution.

I don’t know the business logic and constraints but I would suggest setting up Token Auth, as I think that is ideal and more secure but if you’re just hacking it together take option 1

👤Himanshu Pant

1👍

So in Vue on front-end you need to set the parameter withCredentials true
when using axios axios.get("http://localhost:8081/shop/hello",{withCredentials:true})

On your server-side API you need to enable CORS and Add header Access-Control-Allow-Credentials to the HttpResponse like so Access-Control-Allow-Credentials=true

The thing about Cookies being set over CORS is that they need to be properly created by the browser using the Set-Cookie header attributes, you need to add all the attributes else it wont be created.
I had the same problem when creating my Vue.js & Spring-Boot application.

This is how I created my Cookie server side in Java, but you can create it manually or in whatever language you are using,

So problem can happen with the browser not creating the Cookie properly if the Set-Cookie header does not have attributes set or is invalid, at least that is what I figured out in this short amount of time, but it worked for me.
I hope this helps.

 Cookie cookie = new Cookie("NewRandomCookie",UUID.randomUUID());
 cookie.setPath("/");
 cookie.setMaxAge(3600);
 c.setSecure(false);
 c.setHttpOnly(true);
 cookie.setDomain("localhost");
 
 servletResponse.addCookie(c);

This is my server Response Header so you can see how it looks in the browser, im using Chrome here. I think all the attributes you see are required here, also cookie wont be set if you set attribute "Secure" and you need to set the site domain so you can access the cookie after.

 Request Header

 Request URL: http://localhost:8081/shop/hello
 Request Method: GET
 Status Code: 200 
 Remote Address: [::1]:8081
 Referrer Policy: strict-origin-when-cross-origin

 Response Header

 Access-Control-Allow-Credentials: true
 Access-Control-Allow-Origin: http://localhost:8080
 Connection: keep-alive
 Content-Type: application/json
 Date: Tue, 10 Nov 2020 23:10:30 GMT
 Keep-Alive: timeout=60
 Set-Cookie: JSESSIONID=6D1C6D23F775A1F650842E55AC0A6E3C; Path=/; HttpOnly
 ->
 Set-Cookie: NewRandomCookie=0fdeba77-072d-4a87-9bc3-f041b2ef138a; Max- 
 Age=3600; Expires=True, 10-Nov-2020 23:47:32 GMT; Domain=localhost; Path=/; 
 HttpOnly;
 <-
 Transfer-Encoding: chunked
 Vary: Origin
 Vary: Access-Control-Request-Method
 Vary: Access-Control-Request-Headers
👤Branislav Osadkovski

Leave a comment