wordpress安装wpbakery page builder后，预览页面时报错，console报错提示Refused to display 'URL' in a frame because it set 'X-frame-Options' to 'DENY'，什么原因呢？阿里云服务器北京代理商万维景盛小编为您提供解决方案。

故障原因：

报错信息已经描述的很明确了，在frame嵌套页面的时候被拒绝了，拒绝原因是Header头中的X-frame-Options属性的值为‘deny’。

这个机制是为了防止站点被劫持。

解决方案：

这个问题需要修改Nginx或者Apache的配置，这里以Nginx为例：

在配置文件中加入X-frame-Options属性的值：

参考值：

修改完成之后记得重启Nginx服务，重启之后配置生效，再次请求，搞定。

如果你改完后，再次报错：

Refused to display 'http://xxxxxxxxxx.com' in a frame because it set multiple 'X-frame-Options' headers with conflicting values ('SAMEORIGIN, ALLOW-FROM http://XXXXXXXX.com'. Falling back to 'deny'.

嵌入frame时有兼容性问题，在最新版的Chrome和edge浏览器下空白

你可以先添加以下代码，然后再添加上述的addheader代码：

fastcgi_hide_header X-frame-Options;#（FastCGI模式）
proxy_hide_header X-frame-Options;#（反向代理模式）

再来看一个wordpress的案例：为了防止自己的网站被别的网站嵌套，可以在响应头中添加X-frame-Options字段处理网站在被框架时的行为。其中nginx中的实现很简单：

add_header X-frame-Options "SAMEORIGIN";

加入了这个Header后，在较新版本的WordPress上，使用主题预览相关内容（包括AMP主题自定义）时，Safari等部分浏览器无法正常显示预览帧框。其中，控制台报告有以下的错误：

Multiple ‘X-frame-Options’ headers with conflicting values (‘SAMEORIGIN, ALLOW-FROM …’) …… Falling back to ‘DENY’.

明显，可以看出在预览页面的产生中，PHP也发出了一个X-frame-Options字段的响应头。目前，除了Chrome和Opera，一般浏览器已经支持的使用方法。但是为了保险起见，回落到了状态，从而浏览器拒绝加载帧框。