托管在Netlify的Gatsby站点如何配置尾部斜杠301重定向规则

方案1：Netlify原生规则配置（优先推荐，性能最高无需额外代码逻辑） #

1. 在Gatsby项目的static/目录下新建名为_redirects的文件，无文件后缀
2. 在文件内写入如下规则：

/*/ /:splat 301!

规则说明：

• /*/匹配所有尾部带斜杠的路径
• :splat是Netlify通配符占位符，对应星号匹配到的路径内容
• 301指定为永久重定向
• !是强制生效标识，即使对应带斜杠的路径存在静态资源返回200，也会优先执行重定向规则

3. 重新执行gatsby build构建并部署到Netlify即可生效

方案2：Gatsby插件配置（适合需要本地开发环境也同步生效的场景） #

如果需要本地gatsby develop运行时也遵循重定向规则，可以配合Netlify官方Gatsby插件实现：

1. 安装插件

npm install gatsby-plugin-netlify

2. 修改gatsby-config.js配置，补充插件规则：

module.exports = {
  plugins: [
    // 你项目中已有的其他插件
    `gatsby-plugin-remove-trailing-slashes`,
    {
      resolve: `gatsby-plugin-netlify`,
      options: {
        redirects: [
          {
            from: `/*/`,
            to: `/:splat`,
            statusCode: 301,
            force: true
          }
        ]
      }
    }
  ]
}

3. 重启本地开发服务或重新构建部署即可生效

生效验证 #

部署完成后可通过curl命令快速验证规则是否生效：

curl -I https://你的站点域名/测试路径/

返回结果中如果出现HTTP/2 301状态码，且Location头指向不带尾部斜杠的对应路径，即配置成功。

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