自定义错误页面

更新于：2020-05-30 9:13:06

// 5XX错误页面
const ErrorPageLocal500 = `
<!DOCTYPE html>
<html>
<body>
<h1>Error Page</h1>
<p>这是一个5XX错误页面</p>
</body>
</html>
`;
// 4XX错误页面的url
const ErrorPageURL400 = 'http://errorpage.example.com';
async function rawHtmlResponse(html) {
    const init = {
        headers: {
            'content-type': 'text/html;charset=UTF-8',
        },
    };
    return new Response(html, init);
}
async function handleRequest(request) {
    const response = await fetch(request);
    // 如果请求成功，则返回请求结果
    if (response.status < 400)
        return response;
    // 如果请求返回的状态码是4XX，返回4XX对应的错误页面
    else if (response.status < 500)
        return await fetch(ErrorPageURL400);
    // 如果请求返回的状态码是5XX，返回5XX对应的错误页面
    return rawHtmlResponse(ErrorPageLocal500);
}
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request));
});