ContextQMD
Back to Content

Sec-Fetch-Mode header

files/en-us/web/http/reference/headers/sec-fetch-mode/index.md

latest2.7 KB
Original Source

The HTTP Sec-Fetch-Mode {{Glossary("fetch metadata request header")}} indicates the mode of the request.

Broadly speaking, this allows a server to distinguish between requests originating from a user navigating between HTML pages, and requests to load images and other resources. For example, this header would contain navigate for top level navigation requests, while no-cors is used for loading an image.

<table class="properties"> <tbody> <tr> <th scope="row">Header type</th> <td>{{Glossary("Fetch Metadata Request Header")}}</td> </tr> <tr> <th scope="row">{{Glossary("Forbidden request header")}}</th> <td>Yes (<code>Sec-</code> prefix)</td> </tr> <tr> <th scope="row"> {{Glossary("CORS-safelisted request header")}} </th> <td>No</td> </tr> </tbody> </table>

Syntax

http
Sec-Fetch-Mode: cors
Sec-Fetch-Mode: navigate
Sec-Fetch-Mode: no-cors
Sec-Fetch-Mode: same-origin
Sec-Fetch-Mode: websocket

Servers should ignore this header if it contains any other value.

Directives

[!NOTE] These directives correspond to the values in Request.mode.

  • cors
  • navigate
    • : The request is initiated by navigation between HTML documents.
  • no-cors
  • same-origin
    • : The request is made from the same origin as the resource that is being requested.
  • websocket
    • : The request is being made to establish a WebSocket connection.

Examples

Using Sec-Fetch-Mode

If a user clicks on a page link to another page on the same origin, the resulting request would have the following headers (note that the mode is navigate):

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

A cross-site request generated by an {{HTMLElement("img")}} element would result in a request with the following HTTP request headers (note that the mode is no-cors):

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

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also