拦截响应和 Gatsby v3 页面的 return 状态代码

Question

我想根据某些条件从页面拦截 Gatsby v3 中的响应和 return 404，同时具有由 Gatsby 生成的相同页面 html 内容。

实际上，假设我有

src/pages/profile.js

以及附加到它的一些客户端路由。例如，profile/:userId/:blogId，例如。如果 userId 或 profileId 不存在，页面 html 应该 returned 状态代码 404 但相同的内容由 gatsby 生成。

现在，我尝试研究 gatsby 函数，但该功能不是为此目的而创建的。此外，我研究了 gatsby SSR，但至少就我的研究而言，该功能也不是为此目的而创建的。

此外，found this bug report 在 gatsby 中，但最后一条评论说它在其他一些票中解决了，但另一个票是关于 DEV_SSR，并且没有谈论拦截响应。当使用 DEV_SSR === true 定位路由时，page-data.json 确实有一个 404 状态代码，但实际的 html 页面（发送到服务器的第一个请求）是 200。

编辑：

所以澄清一下，据我所知，html 页面存在，但需要 returned 状态代码 404。默认值也是如此404.html 安装了 Gatsby。即使呈现默认 404 页面，return 状态为 200，而不是 404，但内容类似于“404，页面不存在”。

Answer 1

如果页面不存在（在您的情况下 userId 或 blogId），404 页面应该自动处理，即使在仅客户端路由中也是如此。

但是，如果您想要更手动的方法，由您处理，您可以使用 onRouteUpdate API，来自 gatsby-browser.js:

exports.onRouteUpdate = ({ location, prevLocation }) => {
  console.log('new pathname', location.pathname)
  console.log('old pathname', prevLocation ? prevLocation.pathname : null)
}

对于 SSR 重定向，您可能会发现这篇文章很有见地：https://nesin.io/blog/redirect-in-gatsby-without-plugin

鉴于以下情况：

No, the actual html page generated by gatsby in src/pages/profile.js (for example), exists but given some condition, I would like to override default gatsby functionallity that returns 200, and return 404. But the actual page exists. But event if the page/route does not exist, gatsby returns 200 for the 404.html

请记住，Gatsby 在使用 React 的页面（例如 src/pages/profile.js）中拦截的所有内容都将由浏览器处理，因此它总是 return 200，即使您a 到 404 页面，404 页面将始终存在，因此它将始终 return 对该页面的 200 响应。

如果你想避免这种行为，你需要制定服务器端规则（或使用 .htaccess），假设你想从 /whatever 重定向 (301) 到/404，404 仍然会 return 一个 200，因为它存在。 /whatever 会根据服务器端规则更改其状态。

您还可以使用 createRedirect 操作，从 createPages 开始，它允许您设置 statusCode 但此集成将取决于您如何设置页面。

// Generally you create redirects while creating pages.
exports.createPages = ({ graphql, actions }) => {
  const { createRedirect } = actions
  createRedirect({ fromPath: '/old-url', toPath: '/new-url', isPermanent: true })
  createRedirect({ fromPath: '/url', toPath: '/zn-CH/url', Language: 'zn' })
  createRedirect({ fromPath: '/not_so-pretty_url', toPath: '/pretty/url', statusCode: 200 })
  // Create pages here
}

拦截响应和 Gatsby v3 页面的 return 状态代码

Intercept response and return status code for Gatsby v3 pages

gatsby