如何为GitHub Pages无扩展名文件自定义Content-Type？

我之前也碰到过一模一样的情况——用GitHub Pages当模拟API服务器，无扩展名文件默认返回application/octet-stream，前端解析JSON直接报错，折腾了好一阵子才找到几种靠谱的解决办法，分享给你：

方法一：给文件添加.json扩展名（最简单直接） #

这是最省心的方案，把你的模拟API文件从someAPI改成someAPI.json，然后请求路径调整为username.github.io/project/api/someAPI.json。GitHub Pages会自动识别.json文件，返回正确的application/json Content-Type，前端就能正常解析数据了。

如果担心路径不美观或者不想修改原有前端请求路径，可以试试下面的方法。

方法二：利用自定义404页面做路由转发（适合保留原路径的场景） #

GitHub Pages允许自定义404页面，我们可以借助这个特性做简单的路由处理：

1. 在docs/目录下创建404.html文件，添加一段JavaScript代码用来检测请求路径，自动重定向到带扩展名的文件：

<script>
// 列出所有需要处理的API路径
const targetApiPaths = ['/project/api/someAPI', '/project/api/anotherAPI'];
const currentPath = window.location.pathname;

if (targetApiPaths.includes(currentPath)) {
  // 重定向到带.json扩展名的对应文件
  window.location.replace(`${currentPath}.json`);
}
</script>

2. 将你的模拟文件重命名为someAPI.json，放在对应的api/目录下。
   这样用户请求原路径时，会先触发404页面，脚本自动完成重定向，前端最终拿到的就是正确Content-Type的JSON数据。

方法三：通过Jekyll配置自定义MIME类型（适合熟悉Jekyll的用户） #

GitHub Pages默认用Jekyll构建站点，你可以通过配置文件指定无扩展名文件的MIME类型：

1. 在项目根目录（或docs/目录，取决于你的GitHub Pages设置）创建_config.yml文件。
2. 添加以下配置内容：

# 确保API目录下的文件被Jekyll处理
include:
  - api/*
# 给目标目录的无扩展名文件设置MIME类型
defaults:
  - scope:
      path: "api" # 指定你的API文件所在目录
      type: "files"
    values:
      mime_type: "application/json"

3. 确保项目没有禁用Jekyll（如果根目录有.nojekyll文件，需要先移除），Jekyll构建时会自动给指定目录下的无扩展名文件设置application/json Content-Type。

方法四：换用Netlify部署（如果允许更换平台） #

如果上面的方法都不满足需求，Netlify对MIME类型的配置更灵活，你可以在项目根目录创建netlify.toml文件，直接指定API路径的Content-Type：

[[headers]]
  for = "/api/*"
  [headers.values]
    Content-Type = "application/json"

不过这需要将站点部署到Netlify，适合愿意更换部署平台的用户。

总的来说，方法一最直接高效，方法二、三适合需要保留原请求路径的场景，你可以根据自己的需求选择合适的方案。

内容的提问来源于stack exchange，提问作者lz96