DEV Community

Cover image for 🍪 Cookies and CORS — When Are Cookies Actually Sent?
Alireza Hassankhani
Alireza Hassankhani

Posted on

🍪 Cookies and CORS — When Are Cookies Actually Sent?

In the previous article, we briefly discussed the relationship between Cookies and CORS.

In this article, we'll take a closer look at how browsers decide whether a Cookie should be included in a Cross-Origin request.

One of the most common misconceptions is that once CORS is configured correctly, Cookies are automatically sent with every request.

In reality, that's not how browsers work.

📌 Default Browser Behavior

When a Cross-Origin request is made using fetch() or XMLHttpRequest, browsers do not send Cookies, Authorization headers, or other credentials by default.

For example:

fetch("https://api.example.com/profile")
Enter fullscreen mode Exit fullscreen mode

Even if the user is already logged into api.example.com, the browser will not include any Cookies with this request.

This default behavior helps prevent authentication data from being unintentionally leaked across different Origins.

📌 How Can We Send Cookies?

If you want the browser to include Cookies in a Cross-Origin request, you must explicitly use the credentials option.

For example:

fetch("https://api.example.com/profile", {
  credentials: "include"
})
Enter fullscreen mode Exit fullscreen mode

Using credentials: "include" does not guarantee that Cookies will be sent.

Instead, it tells the browser:

"If there are any Cookies that are eligible to be sent with this request, include them."

📌 What Makes a Cookie Eligible?

Even with credentials: "include", the browser still evaluates the Cookie before sending it.

Some of the most important checks include:

  • Domain
  • Path
  • SameSite

For example:

  • If the Cookie's Domain doesn't match the request destination, it won't be sent.
  • If the request path doesn't satisfy the Cookie's Path attribute, it won't be sent.
  • If the Cookie's SameSite policy blocks Cross-Site requests, it won't be sent.

In other words, credentials is only the first requirement, not the final decision.

📌 Server Configuration Matters Too

If your application expects JavaScript to access the response while using Cookies, the server must also be configured correctly.

For example, the response should include:

Access-Control-Allow-Credentials: true
Enter fullscreen mode Exit fullscreen mode

In addition, the server should return an explicit Origin in:

Access-Control-Allow-Origin
Enter fullscreen mode Exit fullscreen mode

instead of using:

*
Enter fullscreen mode Exit fullscreen mode

because wildcard Origins cannot be used together with credentials.

📌 An Important Distinction

Sending a Cookie and allowing JavaScript to access the response are two different things.

It's entirely possible for this sequence to happen:

  • ✅ The browser sends the request.
  • ✅ The Cookie is included in the request.
  • ✅ The server receives the Cookie and processes the request.
  • ✅ The server generates a valid response.
  • ❌ The browser blocks JavaScript from reading that response because the CORS policy is not satisfied.

So, a CORS error does not necessarily mean that the Cookie wasn't sent.

It may simply mean that the browser refused to expose the response to JavaScript.

📌 Summary

For a Cookie to be included in a Cross-Origin request, several conditions must be met:

  • The request must use credentials: "include".
  • The Cookie itself must satisfy its own rules (Domain, Path, SameSite, etc.).
  • The server must return Access-Control-Allow-Credentials: true.

Finally, even if the Cookie is successfully sent, an incorrect CORS configuration may still prevent JavaScript from accessing the response.

Top comments (0)