CORS with Cookies and Authentication

The Credentials Triple Requirement

For cookies to travel cross-origin, three things must all be configured correctly. Miss any one and cookies will be silently dropped.

1. Server: Allow-Credentials Header

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Credentials: true

The origin must not be * when credentials are enabled.

2. Client: Credentials Flag

// Fetch API
fetch("https://api.example.com/data", {
  credentials: "include",
});

// Axios
axios.get("https://api.example.com/data", {
  withCredentials: true,
});

3. Cookie: SameSite and Secure Attributes

Set-Cookie: session=abc123; SameSite=None; Secure; HttpOnly; Path=/

• SameSite=None is required for cross-origin cookies (since Chrome 80+).
• Secure is mandatory when SameSite=None.
• HttpOnly prevents JavaScript from reading the cookie (recommended for session tokens).

Common Failure Modes

Symptom	Cause
Cookie not sent	Client missing credentials: "include"
Cookie sent but response blocked	Server missing Allow-Credentials: true
Cookie not set at all	SameSite not set to None, or missing Secure flag
Opaque response	Origin is * with credentials — browser rejects silently

Debugging Steps

1. Check the Network tab for the Set-Cookie response header.
2. Open Application > Cookies to see if the cookie was stored.
3. Verify the next request includes the Cookie header.
4. Confirm the CORS response includes both Allow-Origin (specific) and Allow-Credentials: true.