Chrome拦截amp-facebook组件求助：AMP官网示例亦无法加载

这种突发的组件失效确实挺闹心的，尤其是连AMP官方示例都没法正常加载，基本可以排除是你网站代码的问题，大概率是浏览器设置变动或者第三方服务的突发状况导致的。给你几个排查和解决的方向：

• 检查Chrome的第三方Cookie拦截设置
  Chrome最近的隐私更新对第三方Cookie的拦截越来越严格，而amp-facebook嵌入完全依赖Facebook的第三方Cookie。你可以尝试：

  1. 打开Chrome设置，进入「隐私和安全」-「Cookie及其他网站数据」
  2. 找到「允许所有Cookie」选项暂时开启，或者把AMP官方网站和你的客户网站添加到「允许的网站」列表里
  3. 刷新页面测试组件是否恢复加载

• 查看开发者工具的错误日志
  按下F12打开Chrome开发者工具，重点看这两个面板：

  • Console面板：有没有出现CSP（内容安全策略）报错、资源加载失败的提示，这些信息能直接定位拦截原因
  • Network面板：筛选「XHR」或「Script」，看amp-facebook相关的资源有没有403/404等错误状态码

• 强制清除缓存并刷新页面
  有时候浏览器缓存的旧版组件脚本或资源会出问题，按下Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除浏览器缓存后再测试。同时确认你网站里的amp-facebook组件脚本是最新版本，比如：

  <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
  

• 测试其他浏览器验证问题范围
  试试用Firefox、Edge等其他浏览器打开AMP官方示例和你的网站，如果在其他浏览器能正常加载，那说明这是Chrome特有的问题，可能是最近的Chrome版本更新引入了bug，你可以去Chrome的官方反馈渠道提交问题，或者等待后续版本修复。

• 关注Facebook和AMP的官方状态
  偶尔Facebook的嵌入服务会出现全局故障，或者AMP项目对组件做了调整。你可以留意AMP官方的状态公告，以及Facebook开发者平台的服务状态，确认是否是全局性的问题。

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