Fetch Credentials Mode

Fetch credentials mode controls whether browser-managed credentials such as cookies and HTTP authentication data participate in a request. In frontend code, `Request.credentials` determines whether credentials are sent and, for cross-origin requests, whether credentialed responses can affect the browser's cookie state.

The Fetch API exposes credentials mode through the `credentials` option of `fetch()` and through `Request.credentials`. The standard values are `omit`, `same-origin`, and `include`; `same-origin` is the default for Fetch requests.

`same-origin` sends credentials when the request is same-origin, but does not send them for cross-origin requests. `include` permits credentials on both same-origin and cross-origin requests, subject to the browser's other security rules. `omit` prevents credentials from being included.

For cross-origin credentialed requests, setting `credentials: "include"` is not sufficient by itself. The server must opt into credentialed CORS, including an appropriate `Access-Control-Allow-Origin` value rather than a wildcard, and `Access-Control-Allow-Credentials: true` is required for the browser to expose a credentialed response to frontend JavaScript.

Credentials mode also matters to response processing, not only the outgoing request. In particular, it influences whether `Set-Cookie` response headers can result in cookies being stored; JavaScript still cannot directly read `Set-Cookie` because it is a forbidden response header.

Credentials are different from authorization headers that application code explicitly constructs. An `Authorization` header you add yourself is an HTTP header; credentials mode primarily governs browser-managed credentials such as cookies and HTTP authentication, so interview answers should distinguish the two.

Key points

• `omit`, `same-origin`, and `include` are the three Fetch credentials modes.
• `same-origin` is the default and sends credentials only for same-origin requests.
• `include` allows credentials on cross-origin requests, but CORS and cookie policies still apply.
• Credentialed cross-origin responses require compatible server CORS headers.
• Credentials mode also affects whether credential-bearing response state such as cookies can be stored.

Interview questions

Does credentials mode affect cookies set by a response?

Yes. Credentials mode participates in the Fetch rules that determine whether credential-bearing response data can update browser state, including cookie storage. However, cookie acceptance is also constrained by cookie attributes and browser privacy policies. JavaScript cannot read `Set-Cookie` directly because it is a forbidden response header. Therefore, credential handling has both request-side and response-side effects.

What does `credentials: "include"` do in Fetch?

It tells Fetch to include credentials associated with the request, including cookies when the browser's cookie rules allow them. Unlike `same-origin`, it permits credential participation for cross-origin requests. It does not disable CORS or override cookie restrictions. For a cross-origin frontend request, the server must also return compatible credentialed CORS headers.

What is the default Fetch credentials mode, and how does it differ from `omit`?

The Fetch API's default credentials mode is `same-origin`. That means credentials can accompany same-origin requests but are not included on cross-origin requests by default. `omit` explicitly prevents credentials from participating. Choosing `omit` is therefore stricter than relying on the default behavior.

Why can a request with `credentials: "include"` still fail because of CORS?

Credentials mode only tells the browser that credentials may participate; it does not grant the frontend permission to read a cross-origin response. The server must explicitly allow the requesting origin and indicate that credentials are supported. For credentialed CORS, a wildcard `Access-Control-Allow-Origin: *` is not valid for the required response sharing. Thus the client and server must agree on the credentialed CORS policy.

How would you diagnose a cookie not being sent on a cross-origin Fetch request?

First, verify the request's credentials mode and confirm that `include` is used when cross-origin credentials are intended. Then inspect the cookie's domain, path, `Secure`, and `SameSite` attributes and determine whether the request is cross-origin or cross-site. Next, inspect the server's CORS response headers and browser developer tools for blocked-cookie or CORS diagnostics. I would separate these checks because a correct Fetch option cannot override an invalid cookie policy or incompatible CORS configuration.