在前端开发中，我们经常需要在网站或应用程序中嵌入第三方服务提供的资源，例如 YouTube 视频。然而，在嵌入 YouTube 视频时，有时候会遇到错误消息：“拒绝显示文档因为显示禁止的X帧选项”。这个问题可能会让你感到困惑，但是你可以通过以下步骤解决。
原因分析
该错误消息通常表示，由于浏览器的安全策略，不允许外部网站嵌入 X-Frame-Options 标头设置为“SAMEORIGIN”或“DENY”的网页。这意味着如果你尝试将一个具有此标头的页面嵌入到另一个网站中，你将无法成功加载它。
YouTube 采用了这种方法来保护其用户的隐私和安全。当您尝试嵌入一个使用 X-Frame-Options 标头设置为“SAMEORIGIN”或“DENY”的 YouTube 视频时，您将会看到上述错误消息。
解决方案
使用 YouTube 嵌入代码
首先，确保你正在正确使用 YouTube 提供的嵌入代码。你可以从 YouTube 视频页面的分享按钮中获取嵌入代码。该代码片段包括一个 <iframe> 标签和其他必要的属性。该代码片段应该有效，而且不应该显示“拒绝显示文档因为显示禁止的X帧选项”错误消息。
下面是一个示例 YouTube 嵌入代码：
<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXXXXXXXX" frameborder="0" allowfullscreen></iframe>
可能的解决方案
如果你已经按照上述方法使用了正确的嵌入代码，但仍然看到错误消息，可能需要在服务器端添加一些配置以解决问题。以下是两种可能的解决方案：
解决方案一：解除 X-Frame-Options 标头设置
如果你有权访问视频所在的网站，并且可以更改网站的配置文件，请搜索并删除 X-Frame-Options 标头设置。这样可以允许其他网站嵌入该网页中的视频。
解决方案二：使用反向代理
如果你没有权限更改视频所在网站的配置文件，你可以尝试使用反向代理来嵌入视频。反向代理将视频请求发送到另一个服务器，该服务器响应视频内容并将其传递回你的网站。这样的话，浏览器就不会收到带有 X-Frame-Options 标头设置的响应，也就不会出现错误消息。
下面是一个基于 Node.js 的示例代码，展示如何使用反向代理来嵌入 YouTube 视频：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -----------------
----- --- - ---------------
----------------------- ---- -- -
----- ----- - ------------------ ------------
----- -------- - -------------------------------------------
------------------- ---------- -- -
---------------------------------- ------------------
------------------- ------- -- ------------------
------------------ -- -- -----------
---
----------------结论
在前端开发中，嵌入第三方服务提供的资源是一个常见的需求。当你遇到“拒绝显示文档因为显示禁止的X帧选项”错误消息时，首先要确保你正在正确使用嵌入代码。如果问题仍然存在，你可以尝试在服务器端
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15242