自定義錯(cuò)誤頁(yè)面

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

// 5XX錯(cuò)誤頁(yè)面
const ErrorPageLocal500 = `
<!DOCTYPE html>
<html>
<body>
<h1>Error Page</h1>
<p>這是一個(gè)5XX錯(cuò)誤頁(yè)面</p>
</body>
</html>
`;
// 4XX錯(cuò)誤頁(yè)面的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);
    // 如果請(qǐng)求成功，則返回請(qǐng)求結(jié)果
    if (response.status < 400)
        return response;
    // 如果請(qǐng)求返回的狀態(tài)碼是4XX，返回4XX對(duì)應(yīng)的錯(cuò)誤頁(yè)面
    else if (response.status < 500)
        return await fetch(ErrorPageURL400);
    // 如果請(qǐng)求返回的狀態(tài)碼是5XX，返回5XX對(duì)應(yīng)的錯(cuò)誤頁(yè)面
    return rawHtmlResponse(ErrorPageLocal500);
}
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request));
});