---
title: Sec-Fetch-Mode
slug: Web/HTTP/Headers/Sec-Fetch-Mode
tags:
  - Sec-Fetch-Mode
  - Fetch Metadata Request Headers
  - HTTP
  - HTTP Header
  - Reference
  - Request header
browser-compat: http.headers.Sec-Fetch-Mode
---
{{HTTPSidebar}}

The **`Sec-Fetch-Mode`** {{Glossary("Fetch metadata request header", "fetch metadata request header")}} indicates the [mode](/en-US/docs/Web/API/Request/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 header name")}}</th>
      <td>yes (prefix <code>Sec-</code>)</td>
    </tr>
    <tr>
      <th scope="row">
        {{Glossary("CORS-safelisted request header")}}
      </th>
      <td>no</td>
    </tr>
  </tbody>
</table>

## Syntax

```
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`](/en-US/docs/Web/API/Request/mode#value).

- `cors`
  - : The request is a [CORS protocol](/en-US/docs/Web/HTTP/CORS) request.
- `navigate`
  - : The request is initiated by navigation between HTML documents.
- `no-cors`
  - : The request is a no-cors request (see [`Request.mode`](/en-US/docs/Web/API/Request/mode#value)).
- `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](/en-US/docs/Web/API/WebSockets_API) connection.

## Examples

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`):

```
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`):

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

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- Related headers

  - {{HTTPHeader("Sec-Fetch-Dest")}}
  - {{HTTPHeader("Sec-Fetch-Site")}}
  - {{HTTPHeader("Sec-Fetch-User")}}

- [Protect your resources from web attacks with Fetch Metadata](https://web.dev/fetch-metadata/) (web.dev)
- [Fetch Metadata Request Headers playground](https://secmetadata.appspot.com/) (secmetadata.appspot.com)
