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

Question

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

Answer 1

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.

Answer 2

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