11

I have a react frontend with domain sambat.io, deployed to Vercel (Zeit) and a Node API deployed to Heroku with this domain https://safe-ridge-68566.herokuapp.com/ and cookie setup like this:

res.cookie('something', 'ckwdnjwedjbdh3bhbd2hdbhbhbhfbdsf', {
    httpOnly: true,
    sameSite: 'none',
    domain: '.sambat.io',
    secure: true
  })

When I access the front-end, I can see the Set-Cookie header on the response but it won't set the cookie and there's this warning:

This Set-Cookie was blocked because its Domain attribute was invalid with regards to the current host url.

What did I miss here?

Here's the detail of the network request and response:

GENERAL

Request URL: https://safe-ridge-68566.herokuapp.com/users/twitter
Request Method: POST
Status Code: 201 Created

RESPONSE HEADERS

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://sambat.io
Connection: keep-alive
Content-Type: application/json; charset=utf-8
Set-Cookie: something=hwjdhwjdhwjehdjwdhuhhd3hd3u; Domain=.sambat.io; Path=/; HttpOnly; Secure; SameSite=None
Vary: Origin

REQUEST HEADERS

Accept: application/json, text/plain, */*
Connection: keep-alive
Content-Type: application/json
Cookie: something=hwjdhwjdhwjehdjwdhuhhd3hd3u
Host: safe-ridge-68566.herokuapp.com
Origin: https://sambat.io
Pragma: no-cache
Referer: https://sambat.io/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
herlambang
  • 158
  • 1
  • 1
  • 7
  • Why did you set that: domain: '.sambat.io',? – mabruk Jul 06 '20 at 05:02
  • @mabruk because that's the domain of the front-end app. Isn't that `domain` supposed to be the domain of the destination, no? Sorry, I am really new to this. – herlambang Jul 06 '20 at 06:00
  • You're right. Try full url of domain: domain: https://sambat.io (with https://) – mabruk Jul 06 '20 at 06:26
  • @mabruk sadly it wasn't that. The problem is because you can't set cookie on different domain on production. While in development it's working just fine. – herlambang Jul 06 '20 at 16:24

3 Answers3

16

I think the issue is because the front end and backend do not have the same domain try to have the backend on the same domain by probably creating a subdomain.

If you face any further issues please do let me know.

Happy programming.

Yash.S.Narang
  • 518
  • 4
  • 13
  • 3
    Yeah, you're right. Thank you for pointing that out. After tinkering a little bit I figured that it has to be the same domain between the API and front-end. It's kinda confusing because you can have different domain while in development by not specifying the domain properties. So I thought it would be possible to have different domain too in production. But in production you have to specify the domain property and it has to be the same domain for it to works. – herlambang Jul 06 '20 at 16:27
  • 1
    So, do you want to say that Domain cookie option is useless? Like by default the cookie is set for the domain of the response. Domain options allows to set it for another domain, but browser blocks settings cookies for domain other than response one? – fires3as0n Sep 10 '22 at 15:25
3

backend https://survy-laravel9.herokuapp.com/

frontend https://survy-vue3.herokuapp.com/login

i set .env file like it but still error

session_domain=.herokuapp.com
//or
session_domain=herokuapp.com
//or
session_domain=survy-laravel9.herokuapp.com

login.vue

const login = async function (credentials) {
        try {
            const response_sanctum = await axios.get("/sanctum/csrf-cookie");
            console.log(response_sanctum);
            await axios.post("/login", credentials);
            await getUser();
        } catch (err) {
            authenticated.value = false;
            user.value = null;
            console.error("Error loading new arrivals:", err);
            return err;
        }
    };

error response when login function run

error respone

Riki krismawan
  • 503
  • 1
  • 3
  • 10
  • 2
    1. This is probably because of the domain scoping, you can't set cookies using *.herokuapp.com. You need your own domain. More about this here: https://devcenter.heroku.com/articles/cookies-and-herokuapp-com 2. If it doesn't solve your issue, better post a new question so more people can help answering your problem – herlambang Jun 21 '22 at 21:18
  • if i use with token is it possible? – Riki krismawan Jun 22 '22 at 04:13
1

I had same error. Problem was on server side while creating cookieOptions:

var cookieOptions = new CookieOptions
{
    HttpOnly = true,
    Expires = DateTime.UtcNow.AddDays(7),
    SameSite = SameSiteMode.None,
    Secure = true,
    Domain = "https://example.com" <-- problem's here
};

removed it and solved problem :)

 var cookieOptions = new CookieOptions
 {
     HttpOnly = true,
     Expires = DateTime.UtcNow.AddDays(7),
     SameSite = SameSiteMode.None,
     Secure = true,
     Domain = "example.com" <-- like this
 };
GDBxNS
  • 139
  • 6