If you’ve ever struggled with cookies not being sent from your frontend to your backend. Even though you’re sure they’re being set. You're not alone.

I hit this exact problem. After hours of debugging CORS, fetch configs, and cookie settings, I realized it came down to just 2 core rules.

Rule #1: A Server Can Only Set Cookies for Its Own Origin

Let’s say your frontend is hosted at:
https://frontend.com

And your backend is at:
https://api.backend.com

If the backend sends this header:
Set-Cookie: access_token=abc123; HttpOnly; Secure; SameSite=None

It only sets that cookie for api.backend.com, not for frontend.com.

So if you're calling your backend from your frontend, the cookie will be saved under the backend’s domain, and only requests to that domain can include it.

📝 To be able to receive cookies from requester. Backend side need to be the one who setting up the cookies.

Rule #2: You Must Set the Cookie as Cross-Site

If your frontend is hosted on a different domain (e.g., https://frontend.com) and makes a request to https://api.backend.com, that is considered a cross-site request.

By default, modern browsers do not send cookies on cross-site requests unless the cookie is explicitly marked as cross-site.

✅ You must set:

Set-Cookie: access_token=abc123; HttpOnly; Secure; SameSite=None

SameSite=None : Explicitly tells the browser it’s okay to send this cookie across sites.

❗ It's strongly recommended to also set the Secure flag. This ensures the cookie is only sent over HTTPS, protecting it from being exposed over insecure networks.

TL;DR

1. A server can only set cookies for its own origin. If your backend is api.backend.com, the cookie is saved only for api.backend.com.
   Also keep in mind that in order to receive the cookies from frontend.com to api.backend.com. api.backend.com must be the one that set those cookies.

2. If frontend and backend have different origins. You must mark cookies as cross-site using SameSite=None. Otherwise, the browser will block them on requests from a different domain (like your frontend).
   Setting up the Secure flag ensures that cookie is only sent over HTTPS, protecting it from being exposed over networks.

🧠 Feedback on my article

Feedbacks are warmly welcomed, and feel free to share any additional knowledge in the comments. I hope this article helped save you some time debugging the frustrating issue of why your cookies aren’t being sent to the backend.