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,一般浏览器已经支持的使用方法。但是为了保险起见,回落到了状态,从而浏览器拒绝加载帧框。