启用缓存后Azure Front Door无法正常工作，求解决方案

核心排查方向及解决方案 #

1. 源服务器缓存响应头配置问题 #

• 检查源服务器返回的Cache-Control、Expires等缓存头是否合理。如果源返回的缓存策略导致Front Door尝试缓存大文件时，未开启分块传输（Transfer-Encoding: chunked），Front Door会等待整个资源完全获取后再缓存，直接引发超时。
  • 解决：确保源服务器对React打包后的静态资源（js、css、图片等）返回合适的缓存头，比如Cache-Control: public, max-age=31536000，同时开启分块传输，让Front Door可以边接收、边缓存、边响应客户端。

2. 缓存规则的匹配范围错误 #

• 如果缓存规则误匹配了index.html或API请求这类动态资源，Front Door会尝试缓存本不应被缓存的内容，导致源服务器与CDN之间的交互超时。React应用的index.html必须设置为不缓存，否则不仅会超时，还会导致客户端无法获取最新版本。
  • 解决：
    • 创建针对性缓存规则：仅对/*.js、/*.css、/*.png等静态资源设置缓存策略；
    • 单独对/index.html配置Cache-Control: no-cache，或在Front Door中直接设置该路径不缓存。

3. Front Door超时参数调整 #

• Front Door默认的源超时时间可能不足以覆盖首次拉取大缓存资源的耗时。启用缓存后，Front Door首次获取资源需要完整拉取并存储到边缘节点，若源服务器响应慢，极易触发超时。
  • 解决：在Front Door的源配置中，调高源超时时间（可设置为120秒或更长，根据资源大小调整），同时检查连接超时设置，确保参数能覆盖资源传输的实际耗时。

4. 资源路径大小写不匹配 #

• React打包后的资源可能存在大小写混合的路径，而Front Door的缓存键默认区分大小写。如果客户端请求的路径与源服务器实际路径大小写不一致，会导致Front Door反复向源请求资源，最终引发超时。
  • 解决：要么统一React打包配置的资源路径大小写，要么在Front Door缓存规则的“缓存键设置”中启用“忽略大小写”。

5. 边缘节点与源服务器的网络延迟 #

• 首次缓存资源时，Front Door需要从源拉取资源到边缘节点，如果两者之间网络延迟过高，会直接导致首次请求超时。
  • 解决：尽量将源服务器部署在与Front Door边缘节点网络连通性更好的区域；如果使用Azure内部服务（如Storage、App Service）作为源，可利用Azure内部网络优化传输速度。

快速验证步骤 #

1. 临时缩小缓存范围（比如只缓存图片），观察是否还出现超时，逐步定位问题路径；
2. 用浏览器开发者工具查看请求响应头，确认Front Door的缓存命中状态（X-Cache: HIT表示命中缓存，MISS表示未命中）；
3. 查看Front Door的内置日志，定位超时请求的具体源和路径，分析是源响应慢还是CDN处理异常。

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