According to this stackoverflow post (authentication - Set cookies for cross origin requests - Stack Overflow), chrome seems to have specific behaviour with localhost and specifying ports.
However, I don’t understand what works or not for you as you say first it doesn’t
Then, for the exact same url it works
Also, we can see some cookies in your GET request headers, but not the sessionid. Can you check in the browser what are the differences between the sessionid cookie and the other ones (domain, secure, httponly, …)
Thanks for trying to help me.
I was looking at two different browsers:
Firefox:
http://localhost:8000/api/v1/users/1/ - Does not work says no credentials
http://127.0.0.1:8000/api/v1/users/1/ - Works
Chrome:
http://localhost:8000/api/v1/users/1/ - Works
http://127.0.0.1:8000/api/v1/users/1/ - Does not work says no credentials
Yes that is my point from the start. The cookie is not getting included in the request so authentication fails every time. I chose to use Django and a pages app because it’s SEO friendly and Vue SPA is not but it seems I have to just settle for using Vue as the entire app and Django just as the backend?
I have the same use case with a django backend providing login and some server rendered pages with an angular frontend served by another hostname and sending cross-origin requests to the backend and it works for me (at least with some “real” server names, with https and valid certificates, … - I didn’t try with localhost and different ports)
So, when you say “it works” for firefox with…, for chrome with…, do you mean the session cookie is correctly sent to the backend in those cases.
If that’s the case, please, check the domain of the session cookie. If you logged in with localhost, I think the cookie domain is on localhost, so subsequent requests must be done on localhost. If you logged in with 127.0.0.1, then subsequent requests should be done with this IP. I don’t think 127.0.0.1 and localhost are the same from the browser point of view
No when I say it works I mean I can access the endpoint and when it is not working it says authentication credentials were not provided.
The thing is Vue runs on its own dev server on port 8080 and Django runs on its own dev server but in production that is not the case. I am going to finish the work I have to do and put the site on a live server and then test again and see if I can make it work. I will post here what the results are.
Thank you for all your guidance and help
If I got to http://127.0.0.1:8000/api/v1/users/1/ then I see the request cookies do indeed contain the sessionid cookie
|csrftoken|Nxrcpn9waSE8bLEt0jOh9Mklem1vD48x|
|---|---|
|sessionid|dqsc1bkj2r38jdk5pe82971dbtdguplo|
The issue is definitely the localhost and 127.0.0.1 because now I changed the based domain on which Vue runs and I get the data and I see the sessionid in the request.
So I need to make sure Django runs on localhost and Vue and then the session log in will work. Oh my goodness what a waste of 3 days to get here and find the issue.
I just need to make sure I start Django to run on localhost and not 127.0.0.1
Again thanks for your help glad I finally figured it out