Laravel 8集成Facebook评论插件遇X-Frame-Options报错求助

问题说明 #

在Laravel 8项目中嵌入Facebook评论插件时，出现报错：

Refused to display 'https://www.facebook.com/' in a frame because it set 'X-Frame-Options' to 'deny'

尝试过设置target="_top"、通过中间件修改响应头X-Frame-Options: SAMEORIGIN，均未解决问题。

核心原因 #

这个报错是Facebook服务器返回的响应头设置了X-Frame-Options: deny，禁止自身页面被嵌入iframe，和你的Laravel项目的响应头无关——所以修改自己项目的X-Frame-Options完全无效。

正确解决步骤 #

• 严格遵循官方嵌入流程
  必须使用Facebook官方提供的代码嵌入，禁止手动创建iframe指向Facebook页面：

  1. 先加载Facebook JS SDK：

     <div id="fb-root"></div>
     <script async defer crossorigin="anonymous" src="https://connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v18.0" nonce="YOUR_NONCE_VALUE"></script>
     

  2. 再添加评论插件容器标签：

     <div class="fb-comments" data-href="你的页面完整URL" data-width="" data-numposts="5"></div>
     

  注意：data-href必须是公开可访问的完整URL（本地测试需配置Facebook测试应用），且对应页面不能有禁止爬取的设置。

• 检查应用配置

  1. 在Facebook开发者后台的「设置」→「基本」中，将你的域名添加到「应用域」和「网站URL」列表。
  2. 本地测试时需开启应用的「测试模式」，添加测试用户，同时data-href使用本地可访问的URL（如http://localhost:8000/your-page）。

• 排查错误嵌入方式
  若你是手动编写iframe直接嵌入Facebook页面，这种方式本身会被官方阻止，必须依赖官方SDK自动处理iframe加载逻辑，规避跨域和X-Frame-Options限制。

• 清除缓存测试
  清除浏览器缓存后强制刷新页面，或使用无痕模式测试，排除缓存、浏览器插件的干扰。

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