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属性的值：
参考值：
add_header X-Frame-Options ALLOWALL; #允许所有域名iframe add_header X-Frame-Options DENY; #不允许任何域名iframe,包括相同的域名 add_header X-Frame-Options SANEORIGIN; #允许相同域名iframe,如a.test.com允许b.test.com add_header X-Frame-Options ALLOW-FROM uri; #允许指定域名iframe
修改完成之后记得重启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，一般浏览器已经支持ALLOW-FROM的使用方法。但是为了保险起见，回落到了DENY状态，从而浏览器拒绝加载帧框。
解决方法
使用WordPress插件：
在插件库中搜索X-Frame-Options，有许多选择可以实现在PHP部分自动输出该响应头，安装后在nginx上删除响应的设置即可。
严肃的问题：如果使用了静态化处理页面的插件，如WP-Super-Cache，由于PHP不再运行，该响应头会无法输出。使用
ALLOW-FROM方法设置X-Frame-Options：
将对应代码改为add_header X-Frame-Options "ALLOW-FROM http://你的网站";
严肃的问题：上文提到了，这个方法仍有少数浏览器不支持，如此设置会削弱安全性。
修改nginx配置：
经过查阅，nginx可以配置以下命令忽略PHP中的相应响应头。fastcgi_hide_header X-Frame-Options;#（FastCGI模式）proxy_hide_header X-Frame-Options;#（反向代理模式）
随后，可以正常设置本文开头的响应头。
442956988