如何使用ESI标签引入HTML脚本？解决CDN 503错误问题

问题原因 #

将<esi:include>直接嵌套在<script>标签内时，Fastly和Varnish的ESI解析器会误将整个脚本块当作ESI处理单元，加上跨域JS资源未配置允许ESI包含的规则，最终触发503错误。

解决方案 #

• 添加ESI错误降级逻辑：给ESI标签配置onerror属性，解析失败时自动回退到常规的脚本引入方式

  <script>
    <esi:include src="https://whatever.min.js" onerror='document.write("<script src=\"https://whatever.min.js\"><\/script>")'/>
  </script>
  

• 配置CDN的ESI允许规则：
  • Varnish：在VCL中为目标JS资源的响应设置beresp.do_esi = true;，同时确保资源的Access-Control-Allow-Origin头允许CDN域名访问
  • Fastly：在服务配置中开启对应域名的ESI权限，添加跨域资源的信任规则
• 替换为资源合并方案：放弃ESI，直接在构建环节合并多个JS文件为单个资源，或使用Fastly/Varnish自带的资源合并功能（如Fastly的Asset Optimization），更稳定且无需依赖ESI解析

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