You need to enable JavaScript to run this app.
导航
HTML渲染
最近更新时间:2024.01.05 17:40:57首次发布时间:2023.02.15 19:04:51

边缘页面渲染(ESR)

您可以利用边缘函数做边缘页面渲染(ESR),页面可以以任意形式存在,比如简单的静态页面,或者根据具体请求信息动态生成。

源站错误回复页面改写

通常源站会返回一些错误信息,比如 Java 的服务器通常会返回一个 tomcat 的页面,其中包含了较为敏感的代码 stacktrace 信息,这些信息如果直接返回给用户会非常不友好。使用边缘函数则可以拦截这种源站返回的错误页面,然后发送更为友好的自定义页面给用户。

const htmlResponse = `
<html>

  <head>错误页面</head>
  <body>服务器开了点小差,亲,请稍后再试</body>
</html>
`;

addEventListener('fetch', (event) => {
  event.respondWith(handleResponse(event));
});

function isErrorStaus(st) {
  return st >= 500;
}

async function handleResponse(event) {
  const response = await fetch(event.request);

  // 如果源站返回了 >= 500的状态码,那么我们返回自定义错误页面
  // 否则返回源站的信息。
  if (isErrorStatus(response.status)) {
    return htmlResponse;
  } else {
    return response;
  }
}

同时,这样的逻辑也适用于边缘特殊信息的兜底和校验,比如,源站的页面由于功能异常可能会泄漏敏感信息,边缘侧可以增加检查是否存在敏感信息的逻辑,并及时上报错误,这种功能常常和A/B测试结合使用。

天气预报页面生成

天气预报页面利用用户的地理信息进行查询,您可以利用边缘函数运行时提供的该信息用于天气信息查询,然后再利用 JavaScript 代码将信息生成对应的页面。

const apiURL =
    'http://www.tianqiapi.com/free/day?appsecret=abcdefg&appid=abcdefg&';

async function queryWeather(city) {
  const response = await fetch(apiURL + 'city=' + city);
  if (response.ok) {
    // 假设返回的数据为JSON
    /*
    {
      air: '94', city: '南京', cityid: '101190101', tem: '31', tem_day: '31',
          tem_night: '24', update_time: '14:12', wea: '多云', wea_img: 'yun',
          win: '东南风', win_meter: '9km/h', win_speed: '2级'
    }
    */

    const data = await response.json();

    const weather = data.wea;
    const tempDay = data.temp_day;
    const tempNight = data.temp_night;


    return `<html>
    <head> 来自${city} 的用户</head>
    <body> 您好,您的当地天气为:${weather},白天气温为 ${
        tempHigh},夜间气温为 ${tempLow}</body>
    </html>
    `;
  } else {
    return '<html><head>天气API开小差了</head></body>';
  }
}

async function handle(event) {
  // 获得客户端的ip城市地址信息
  const city = event.info.geo.city;
  // 通过city查询该用户的天气信息
  return queryWeather(city);
}