如何在Gatsby v3中拦截页面响应，保留原有HTML内容的同时返回404状态码

Gatsby作为静态站点生成器，默认静态输出的HTML文件本身不具备控制响应状态码的能力，状态码由托管服务决定，针对你提到的场景可以通过以下两种方案实现：

方案1：使用SSR能力通过getServerData设置状态码 #

你之前调研的SSR能力其实可以支持该场景，只需要在页面组件中导出getServerData方法，在方法内完成参数校验后直接返回指定状态码即可，Gatsby会自动将该状态码赋值到HTML响应头。
以src/pages/profile.js为例：

// 首先确保你已经配置了客户端路由，可通过gatsby-plugin-create-client-paths实现
// gatsby-config.js中添加配置：
// {
//   resolve: `gatsby-plugin-create-client-paths`,
//   options: { prefixes: [`/profile/*`] },
// }

import * as React from "react"

const ProfilePage = () => {
  // 原有页面逻辑不变
  return <div>Profile页面内容</div>
}

export async function getServerData(context) {
  // 解析路由参数
  const pathSegments = context.url.pathname.split('/').filter(Boolean)
  const userId = pathSegments[1]
  const blogId = pathSegments[2]

  // 自定义校验逻辑，判断userId、blogId是否存在
  const isValid = checkResourceExist(userId, blogId)

  if (!isValid) {
    // 校验不通过时返回404状态码，页面内容仍为原有Profile页面内容
    return {
      status: 404,
      props: {}
    }
  }

  return {
    props: {}
  }
}

export default ProfilePage

该方案适用于需要动态校验资源是否存在的场景，部署时需要启用Gatsby的SSR/DSG能力。

方案2：静态部署场景配置托管平台规则 #

如果你坚持使用纯静态输出，不需要服务端渲染能力，可以通过配置托管平台的路由规则实现返回指定HTML内容同时设置404状态码。
以Nginx部署为例，配置参考如下：

# 提前将所有有效的userId、blogId组合写入map规则，也可通过lua脚本实现动态校验
map $uri $is_valid_resource {
    default 0;
    ~^/profile/1001/2001$ 1;
    ~^/profile/1002/2003$ 1;
    # 其余有效路径依次添加
}

server {
    listen 80;
    root /path/to/your/gatsby/public;
    index index.html;

    location ~ ^/profile/.* {
        try_files $uri $uri/ /profile.html;
        if ($is_valid_resource = 0) {
            return 404;
        }
        error_page 404 = /profile.html;
    }

    # 其余站点配置
}

如果使用Netlify、Vercel等Serverless托管平台，可直接在平台的路由配置页添加对应重写规则，指定匹配路径返回/profile.html同时设置状态码为404即可。

默认404页面状态码修正 #

Gatsby默认生成的404.html静态文件，默认访问返回200状态码的问题同样通过托管平台配置解决：

• Nginx部署：添加配置error_page 404 /404.html;即可
• Netlify/Vercel等平台：会自动识别public目录下的404.html，默认访问不存在路径时返回404状态码同时加载该页面内容，无需额外配置。

内容的提问来源于stack exchange，提问作者Mario Škrlec