# Vary Header — Syntax, Values & Examples

> Lists the request headers that change the response, so caches keep a separate copy for each variant.

Caches key stored responses by URL. If a response also depends on a request header — compression, language, the CORS `Origin` — Vary tells caches to include that header in the key. Without it, a Brotli response can reach a client that can't decode it, or one origin's CORS headers can be served to another.

- Type: Response header
- Category: Caching
- Defined in: [RFC 9110 §12.5.5 — Vary](https://www.rfc-editor.org/rfc/rfc9110.html#section-12.5.5)

## Syntax

```http
Vary: <header-name>, <header-name>…   or   Vary: *
```

## Examples

```http
Vary: Accept-Encoding
```

separate compressed and uncompressed copies (servers add this automatically)

```http
Vary: Origin
```

the CORS headers depend on the calling origin

```http
Vary: Accept-Language
```

content negotiated by language

## Good to know

- `Vary: Cookie` or `Vary: Authorization` effectively disables shared caching, since nearly every value differs.
- `Vary: *` makes the response uncacheable in practice.
- If you choose `Access-Control-Allow-Origin` per request, you must also send `Vary: Origin`.

## How to set Vary

### Express

```
res.set("Vary", "Accept-Encoding");
```

### Next.js (next.config.js)

```
module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [{ key: "Vary", value: "Accept-Encoding" }],
      },
    ];
  },
};
```

### nginx

```
add_header Vary "Accept-Encoding" always;
```

### Apache (.htaccess)

```
Header always set Vary "Accept-Encoding"
```

## Check it

Fetch only the response headers and filter for Vary. In the browser, it's under Response Headers in DevTools → Network.

```sh
curl -sI https://example.com/ | grep -i '^vary:'
```

## FAQ

### Why does my CDN return the wrong CORS headers?

It cached a response made for one origin and served it to another. Add Vary: Origin wherever Access-Control-Allow-Origin depends on the request.

## Related headers

- [Cache-Control](https://www.devkult.com/headers/cache-control.md): Directives that tell browsers and CDNs whether, where and for how long a response may be cached.
- [Accept-Encoding](https://www.devkult.com/headers/accept-encoding.md): Lists the compression formats the client can decompress, so the server can pick one.
- [Access-Control-Allow-Origin](https://www.devkult.com/headers/access-control-allow-origin.md): Tells the browser which origin may read this response from JavaScript running on another site.

## Further reading

- [HTTP caching explained](https://www.devkult.com/blog/http-caching-explained.md)
- [CORS errors explained](https://www.devkult.com/blog/cors-errors-explained.md)

Open the interactive page: https://www.devkult.com/headers/vary