如何为Cloudflare Workers & Pages托管页面添加外部CDN链接？

要将指定的CDN资源添加到Worker生成的HTML页面，只需调整HTML结构，把资源链接插入到正确位置即可，具体修改如下：

修改后的完整Worker代码 #

export default {
  async fetch(request) {
    const html = `<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <!-- 引入Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
      </head>
      <body>
        <h1>Hello World</h1>
        <p>This markup was generated by a Cloudflare Worker.</p>
        
        <!-- 引入jQuery脚本 -->
        <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
      </body>
    </html>`;

    return new Response(html, {
      headers: {
        "content-type": "text/html;charset=UTF-8",
      },
    });
  },
};

关键说明 #

• 补全了完整的HTML文档结构：添加<html>和<head>标签，同时加入<meta charset="UTF-8">确保字符编码一致
• Bootstrap的CSS链接放在<head>内，保证页面渲染前加载样式，避免无样式闪烁问题
• jQuery脚本放在<body>末尾，既不会阻塞页面初始渲染，也能确保DOM元素加载完成后脚本可正常调用

内容的提问来源于stack exchange，提问作者s_p