时间戳

首页 > 解决方案 > 如何正确返回 Nuxt 项目中错误页面的 HTTP 状态码 404

firebase - 如何正确返回 Nuxt 项目中错误页面的 HTTP 状态码 404

问题描述

如果您请求 URL https://www.sistrix.com/I-do-not-exist/，我们没有该页面的内容。由于请求的页面不存在，因此没有内容，我们的网络服务器将在标题中向您显示一个错误页面，它显示 304 作为不正确的状态代码。如何在标题中显示 404 作为状态码。

这是我的代码

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="error-template">
          <a href="/">
            <img
              class="mainlogo"
              alt="Company logo"
              style="margin-bottom: 11px"
              src="https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg"
            />
          </a>
          <h3 style="color: gray">Oops!</h3>
          <h1 v-if="error.statusCode === 401">Page not found</h1>
          <h1 v-else>An error occurred- {{ statusCode }}</h1>
          <ul>
            <li v-for="statusCod in statusCode" :key="statusCod.id" class="item">
              <nuxt-link :to="'/statusCode/' + statusCod.id">{{ statusCod.statusCode }}</nuxt-link>
            </li>
          </ul>
          <h1>Hello</h1>
          <img alt="company shot" style="width: 20%" src="https://ik.imagekit.io/your_imagekit_id/rest-of-the-path.jpg" />
          <div class="error-actions">
            <nuxt-link style="font-size: 17px" to="/">Home page</nuxt-link>
          </div>
        </div>
        strong text
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@nuxtjs/axios'
export default {
  layout: 'blog',

  props: ['error'],
  asyncData({ $axios }) {
    const { rest } = axios
      .post(`http://www.json-generator.com/api/json/get/bTHZjyGrPC?indent=2`)
      .then((res) => {
        return { statusCode: rest }
      })
      .catch((e) => {
        error({ statusCode: 404, message: 'Post not found' })
      })
  },
}
</script>

<style scoped>
.error-template {
  padding: 14% 15px;
  text-align: center;
}
.error-actions {
  margin-bottom: 15px;
  margin-top: 15px;
}
.error-actions .btn {
  margin-right: 10px;
}
.mainlogo {
  max-width: 40px;
}
</style>

标签： firebasevue.jsnuxt.jshttp-status-code-404response-headers

解决方案

如果您直接进入 404 页面，您应该会得到一些成功的代码，例如200因为您确实正确地到达了它。

如果你去类似的东西https://www.sistrix.com/nice-fake-url，你应该有一个 404 错误，然后将用户重定向到error布局。

还有，什么是http://www.json-generator.com/api/json/get/bTHZjyGrPC?indent=2？

推荐阅读