Tarasovych's avatar

Can anybody test my app (problems with Cookies)?

I have back-end Laravel app: GitHub. I have front-end Vue app: GitHub. I'm trying to receive Cookies in my Vue app, but I don't get them. I don't understand what's wrong. Both apps have same subdomain parts locally. Cookie Header exists but there is no Cookies in Developers Console->Application->Cookies.

TL;DR

//Laravel api routes
Route::get('testget', function () {
    setcookie('.domain.com', '.domain.com', time()+3600, "/", '.domain.com');
    setcookie('domain.com', 'domain.com', time()+3600, "/", 'domain.com');
    setcookie('admin.domain.com', 'admin.domain.com', time()+3600, "/", 'admin.domain.com');
    return response('success');
});

Route::post('testpost', function () {
    setcookie('.domain.com', '.domain.com', time()+3600, "/", '.domain.com');
    setcookie('domain.com', 'domain.com', time()+3600, "/", 'domain.com');
    setcookie('admin.domain.com', 'admin.domain.com', time()+3600, "/", 'admin.domain.com');
    return response('success');
});
//Vue requests
axios.get('//api.domain.com/api/testget')
    .then(function (response) {
        console.log('GET request success')
        console.log(response)
    })
    .catch(function (error) {
        console.log(error)
    })
axios.post('//api.domain.com/api/testpost')
    .then(function (response) {
        console.log('POST request success')
        console.log(response)
    })
    .catch(function (error) {
        console.log(error)
    })

Thank you!

0 likes
7 replies
lostdreamer_nl's avatar

How about using the Cookie class of Laravel, does that work?

Cookie::queue($name, $value, $minutes);

That will setup a cookie to be sent when the response is sent

lostdreamer_nl's avatar

aah, in that case, check your config/session.php for the following settings:

path
domain
http_only

Either path has no value, or domain is wrong, or: most importantly http_only is true.

I suspect the last one, which basically says: Ajax requests cannot get cookies. If so, put http_only to false and it should work.

If that did not work, could you do the request while having your developer toolbar open, and post an image of the request and response headers that are coming and going. We might find something there.

Tarasovych's avatar

@lostdreamer_nl What I had in config:

'path' => '/',
'domain' => '.domain.com',
'http_only' => false,

I don't forgot about php artisan config:cache

Still no Cookies...

My request are success, but there is also in console:

Failed to load http://api.domain.com/api/testpost: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://admin.domain.com:8080' is therefore not allowed access.

I set up this package, errors gone, but there were no Cookies too.

lostdreamer_nl's avatar

Aaah,

That's why I always ask for more info (screenshots about headers)

Your problem was with CORS because you are going outside of your domain with this API call (port 8080 is a completely other domain from port 80).

To fix this I definately need to have a screenshot of the network tab of the developer toolbar while you are doing this request, there might be a lot of stuff to check.

Also note: assuming that, when this app goes live, the admin panel will not be running on a different port then your API (as you have it now), I really suggest to mirror your development environment setup as close to the live version as possible, so both your admin panel and API should run in the same server, both running in nginx or apache, not 1 domain via apache, and 1 via artisan:serve.

Otherwise you risk either:

  • setting up your live env in a way that is less secure than needed (just to get it working in your development env)
  • having a lot of problems getting your app running on the live env because it doesnt really mirror your development env
1 like
Tarasovych's avatar

@lostdreamer_nl Ah, than you. Somebody told me that port doesn't affect my problem. I'm using some software for local development. It's running Node for Vue on 8080. So I must have both apps on port 80? I don't know if this is possible, but I'll try to find some workaround. Network tab screenshots

Please or to participate in this conversation.