有个重构项目的需求,其中有个功能就是渲染后端返回的html字符串。

一般的标签展示出来没问题,但是在有video标签时出现了问题,此时控制台有一些403的报错

如果直接在网上找的视频,是可以直接使用的,但是调了接口就会出现403的报错

video标签加载出来了,但是不能进行控制播放

代码:

<div class="html_container text_start" ref="content" v-html='vHtml'></div>

<script>
export default {
	data(){
		return {
			vHtml:'<div>......</div>', // 假设vHtml为包含video的html字符串
		}
	}
}
</script>

猜测错误原因:

猜测1. v-html在渲染video时有问题

对应操作: 不使用v-html,改为element.append或者element.insertAdjacentHTML
代码:

<div class="html_container text_start" ref="content" id="content"></div>


<script>
export default {
	mounted(){
		let vHtml = '<div>......</div>'; // 假设vHtml为包含video的html字符串
		let element = document.getElementById('content');
		element.insertAdjacentHTML("beforeend", vHtml);
	},
}
</script>

页面查看效果和之前用v-html的效果是一样的

猜测2. 为什么会有403

原因:Referer携带了我们自身网站的域名,第三方网站认为这是非法访问,所以报错403 forbidden,因此我们需要在自己项目中跳转第三方外链的时候,去掉Referer信息

这是本地使用v-html渲染video获取视频的请求:

在这里插入图片描述

直接在网页打开该视频链接获取事情的请求:

在这里插入图片描述

对应操作:
在html文件里添加一个meta标签

<meta name="referrer" content="never">

如此即可正常播放!!!

Logo

前往低代码交流专区

更多推荐