CODEWITHSUNDEEP
javascriptnode.jsexpresscookiessetcookie
herlambang
herlambang

Reputation: 178

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

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

Upvotes: 13

Views: 59056

Answers (4)

Mael Abgrall
Mael Abgrall

Reputation: 475

Came across this issue, and this link was the first in Google.

I faced the issue when working in localhost, and the fix in this specific case is you need to set the cookie domain to localhost (that's right, no HTTP, no port), which can be counterintuitive when using CORS, since you need to set your CORS to http://localhost:port

Upvotes: 1

GDBxNS
GDBxNS

Reputation: 449

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
 };

Upvotes: 4

Riki krismawan
Riki krismawan

Reputation: 567

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

Upvotes: 2

Yash.S.Narang
Yash.S.Narang

Reputation: 554

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.

Upvotes: 17

Related Questions