Browser doesn't store cookies - cookies

Question

I'm sending Cookie from Laravel application (http://backend.local) to Vue SPA (http://frontend.local:8080):
Laravel side (dummy route)
//api routes
Route::post('login', function () {
setcookie("name", 'value', time()+3600, "/", ".local");
return response('ok');
});
Vue side
axios.post('//backend.local/api/login')
.then(response => {
console.log(response)
}).catch(error => {
})
Response Headers:
HTTP/1.1 200 OK
Date: Mon, 21 May 2018 09:42:35 GMT
Server: Apache
Set-Cookie: name=value; expires=Mon, 21-May-2018 10:42:36 GMT; Max-Age=3600; path=/; domain=.local
Cache-Control: no-cache, private
Access-Control-Allow-Origin: http://frontend.local:8080
Vary: Origin
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 59
Content-Length: 2
Keep-Alive: timeout=10, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8
But there is no Cookies in broswer storage (Application tab in Developers Console).
What's wrong?
UPDATE: I think the problem is that there is port number in http://frontend.local:8080. Can I remove port number from url?

Answer 1

Original Answer
The browser will automatically reject any domain which doesn't have two parts to it. So using .local is not considered a domain at all. You need to two levels at least. Consider the below flask app I created for demoing the same
from flask import Flask, request, make_response
app = Flask(__name__)
#app.route("/")
def index():
resp = make_response()
resp.set_cookie('value1', ".frontend.local", domain=".frontend.local")
resp.set_cookie('value2', "frontend.local", domain="frontend.local")
resp.set_cookie('value3', ".local", domain=".local")
return resp
app.run(debug=True)
Now testing this through curl
$ curl -v frontend.local:5000
* Rebuilt URL to: frontend.local:5000/
* Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to frontend.local (127.0.0.1) port 5000 (#0)
> GET / HTTP/1.1
> Host: frontend.local:5000
> User-Agent: curl/7.54.0
> Accept: */*
>
* HTTP 1.0, assume close after body
< HTTP/1.0 200 OK
< Content-Type: text/html; charset=utf-8
< Set-Cookie: value1=.frontend.local; Domain=.frontend.local; Path=/
< Set-Cookie: value2=frontend.local; Domain=frontend.local; Path=/
< Set-Cookie: value3=.local; Domain=.local; Path=/
< Content-Length: 0
< Server: Werkzeug/0.14.1 Python/3.6.5
< Date: Tue, 29 May 2018 12:58:20 GMT
<
* Closing connection 0
When you navigate this in browser, you can see that the cookie with Domain=.local gets discarded but rest 2 remains
And later you can see that both the cookies have been sent to the reload of the same page
Update 1: 30th May 2018
Since you are using 2 different domains, you should use frontend.local.com and backend.local.com and the cookies should be returned with domain as .local.com, so that backend and frontend works as a subdomain of local.com. Then frontend.local.com gets the cookies set by backend.local.com through domain sharing as the cookie domain is set to .local.com

Answer 2

Since this is a CORS call, you will need to set setCredentials to true. This is a standard behavior: Standard CORS requests do not send or set any cookies by default.
The withCredentials property will include any cookies from the other domain in the request and also set any cookies from other domain.
So your Vue.js code will be:
axios.defaults.withCredentials = true
axios({
method: 'POST',
url: '//backend.local/api/login',
// THIS IS IMPORTANT
withCredentials: true
})
.then(response => {
console.log(response)
}).catch(error => {})
[Edit]: Read more about CORS at HTML Rocks.
Please let me know if it doesn't help.