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.
The request is initiated by navigation between HTML documents.
no-cors
The request is a no-cors request (see Request.mode).
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
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):