Question

是否可以在不使用Web服务器的情况下拦截404错误（在文件系统中浏览html文件）？

我尝试使用一些javascript，使用隐藏的iframe预加载目标页面并检查结果，然后触发自定义错误或重定向到正确的页面。

这项工作很好，但在性能上并不好。

Answer 1

404错误是HTTP状态响应。因此，除非您尝试使用HTTP请求/响应检索此文件，否则您将无法获得真正的404错误。你只能像你建议的那样模仿一个。处理404错误的任何“标准”方式都取决于您的Web服务器的风格......

Answer 2

您为什么不想使用服务器？

我不相信客户端可以处理404错误，因为404错误是服务器端。

每当您加载网页时，都会向服务器发出请求。因此，当您要求不存在的文件时，它是处理错误的服务器。当服务器发回响应以告诉您无法找到该文件时，常规的HTML / CSS / JavaScript才会出现。

史蒂夫

Answer 3

404是一个HTTP响应代码，因此只能由说出它的服务器通过HTTP协议提供。 file：//扩展名不是真正的协议响应，它是内置于支持本地文件支持的客户端（如浏览器）中的黑客攻击，但无论是浏览器/客户端是否公开其文件中的任何响应代码，它都取决于： //实施例如，理论上他们可以在DOM中报告它们，但它们将是暴露给自己的响应代码，因此很少实现。大多数人没有，而且没有标准的方法。您可以查看浏览器扩展程序，例如Firefox，看看它们是否支持它，但是，这是非常不标准的，如果您在网络上弹出它可能会中断。

Answer 4

因为我今天正在寻找这个。现在，您可以在没有服务器的情况下使用Service Worker来缓存自定义404页面，然后在获取请求状态为404时提供服务。按照google cache lab上的说明，worker文件如下所示：

const filesToCache = [
  '/',
  '404.html'
];

const staticCacheName = 'pages-cache-v1';

self.addEventListener('install', event => {
  console.log('Attempting to install service worker and cache static assets');

  event.waitUntil(
    caches.open(staticCacheName).then(cache => {
      return cache.addAll(filesToCache);
    });
  );
});

self.addEventListener('fetch', event => {
  console.log('Fetch event for ', event.request.url);

  event.respondWith(
    caches.match(event.request).then(response => {
      if (response) {
        console.log('Found ', event.request.url, ' in cache');
        return response;
      }
    
      console.log('Network request for ', event.request.url);
      
      return fetch(event.request).then(response => {
        console.log('response.status:', response.status);

        // fetch request returned 404, serve custom 404 page
        if (response.status === 404) {
          return caches.match('404.html');
        }
      });
    });
  );
});

自定义404错误没有服务器

4 个答案: