我的博客中使用的是 Hugo 静态网站生成器，部署在 Cloudflare Pages 上，在某些博客中，我会提供一些配置文件以及脚本文件。

默认情况下，在浏览器中打开这些文件的 URL 时会自动下载，当我想要先预览这些文件，如果没有问题我再主动下载。

## 如何解决

在 Hugo 静态文件夹中添加一个 `_headers` 文件，这个文件是用来配置 Cloudflare Pages 的。

```bash
# 在静态文件夹中添加 _headers 文件
touch _headers
```

```text
# _headers 文件内容
/*.sh
  Content-Type: text/plain; charset=utf-8
  X-Content-Type-Options: nosniff


/*.conf
  Content-Type: text/plain; charset=utf-8
  X-Content-Type-Options: nosniff
```

配置完成后，重新部署项目，就可以在浏览器中预览这些文件了。

## 为什么配置了 `_headers` 文件后，就可以在浏览器中预览这些文件？

没有配置 _headers 文件时，Cloudflare Pages 中，访问 `.sh` 和 `.conf` 会响应为：

```text
Content-Type: application/octet-stream
X-Content-Type-Options: nosniff
```

- `application/octet-stream`：表示“通用二进制流”，浏览器无法确定内容类型。出于安全考虑，它会选择 下载文件 而不是直接显示。
- `X-Content-Type-Options: nosniff`：禁止浏览器进行 MIME 类型嗅探，浏览器不能去猜测这是文本文件，因此无法直接渲染。

而当我们通过 _headers 显式指定：

```text
Content-Type: text/plain; charset=utf-8
X-Content-Type-Options: nosniff
```

- 浏览器会明确知道这是 纯文本文件，并且使用 UTF-8 编码。
- 因此文件可以在浏览器中直接显示，不会触发自动下载，同时中文也能正常渲染。
- 注意：`Content-Type` 的值必须包含 `charset=utf-8` 参数，如果不包含，遇到中文会乱码。

参考：

- <https://developers.cloudflare.com/pages/configuration/headers/>
- <https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Type>