Sec-Fetch-Mode

The HTTP Sec-Fetch-Mode request header indicates the mode of the request, describing how the browser initiated the fetch operation.

Usage

The Sec-Fetch-Mode header is part of the Fetch Metadata Request Headers specification. Browsers set this header automatically on every outgoing request. The value describes the fetch mode, which determines how the browser handles the response and whether CORS rules apply.

Servers use Sec-Fetch-Mode to distinguish between navigation requests (a user clicking a link), same-origin API calls, cross-origin resource loads, and WebSocket upgrade requests. This information helps enforce security policies on the server side. A server hosting a JSON API expects requests with cors or same-origin mode and rejects requests arriving with navigate because navigations to an API endpoint indicate unintended access patterns.

The header works together with Sec-Fetch-Dest, Sec-Fetch-Site, and Sec-Fetch-User to provide full context about each incoming request.

Directives

cors

The request follows the CORS protocol. The browser enforces CORS preflight checks and response header rules. Cross-origin fetch() calls and XMLHttpRequest operations with explicit mode produce this value.

navigate

The request is a navigation between documents. Clicking a link, submitting a form, typing a URL in the address bar, and using window.location produce this value. Navigations always target a top-level document or a frame.

no-cors

The request is made without CORS enforcement. Image loads through <img>, stylesheet loads through <link>, and script loads through <script> send this value by default for cross-origin resources.

same-origin

The request targets the same origin as the page making the request. The browser blocks the response if the server does not share the same origin. Fetch API calls with mode: "same-origin" produce this value.

websocket

The request initiates a WebSocket connection. The browser sets this mode during the WebSocket handshake when upgrading from HTTP to the WebSocket protocol.

Example

A user clicks a link to navigate to a page on the same site. The browser sends all four fetch metadata headers.

Sec-Fetch-Mode: navigate
Sec-Fetch-Dest: document
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1

A JavaScript fetch() call to a cross-origin API triggers CORS mode.

Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Sec-Fetch-Site: cross-site

A cross-origin image loaded through an <img> tag uses no-cors mode.

Sec-Fetch-Mode: no-cors
Sec-Fetch-Dest: image
Sec-Fetch-Site: cross-site

Takeaway

The Sec-Fetch-Mode header reveals the fetch mode of a request, allowing servers to enforce access control policies based on whether the request is a navigation, a CORS call, or a simple resource load.

See also

• Fetch Metadata Request Headers (W3C)
• Sec-Fetch-Dest
• Sec-Fetch-Site
• Sec-Fetch-User
• Cors
• HTTP headers