vue使用iframe,embed,video报错because it set ‘X-Frame-Options‘ to ‘DENY‘

场景

页面上使用iframe,embed,video插入音频，pdf等

控制台报错

Refused to display 'http://127.0.0.1:8000/console' in a frame because it set 'X-Frame-Options' to 'DENY'.

X-Frame-Options

1. 简介

The X-Frame-Options HTTP 响应头是用来给浏览器 指示允许一个页面 可否在 , 或者
中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免点击劫持（clickjacking）攻击。

2. 可取值

X-Frame-Options 有三个值：
1. DENY ：表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许
2. SAMEORIGIN ：表示该页面可以在相同域名页面的 frame 中展示
3。 ALLOW-FROM uri ：表示该页面可以在指定来源的 frame 中展示
根据上述 X-Frame-Options的三个值描述，只要修改django的X-Frame-Options为SAMEORIGIN ，那么相同域名页面就可以使用frame中展示。

3. 作用

1. 点击劫持保护
当恶意站点诱使用户单击他们已加载到隐藏框架或iframe中的另一个站点的隐藏元素时，会发生这种类型的攻击。
2. 防止点击劫持
现代浏览器采用X-Frame-Options HTTP标头，该标头指示是否允许在框架或iframe中加载资源。如果响应包含标头值为的标头，SAMEORIGIN则浏览器将仅在请求源自同一站点时才将资源加载到框架中。如果将标头设置为，DENY则无论哪个站点发出请求，浏览器都将阻止资源加载到框架中。

解决

后端添加 response.setHeader(“X-Frame-Options”, “SAMEORIGIN”);// 解决IFrame拒绝的问题