HTML video标签 src为网络地址无法显示问题解决 403Forbidden

视频地址引用访问外链出现403 forbidden,如下图所示。

解决方案:
头部header里面添加meta属性referrer。

 <meta name="referrer" content="no-referrer">

原理解析:

http请求头中有一个referrer字段,用来表示发起http请求的源地址信息

服务器端在拿到这个referrer值后判断请求是否来自本站

若不是则返回403,从而实现图片的防盗链。

上面出现403就是因为,请求的是别人服务器上的资源,但把自己的referrer信息带过去了,被对方服务器拦截返回了403。

在前端可以通过meta来设置referrer policy(来源策略),referrer设置成no-referrer,发送请求不会带上referrer信息,对方服务器也就无法拦截了。

content=“属性值”常见有以下几种:

no-referrer:任何情况下都不发送Referrer信息;

no-referrer-when-downgrade:仅当协议降级(如从HTTPS页面跳转到HTTP页面)时不发送Referrer信息。是大部分浏览器默认策略。

origin:发送只包含host部分的referrer信息,也就是只包含了协议和域名的url,不包含域名后面部分,比如,来源网页url是https://baidu.com/1.html,但referrer值只包含http://www.baidu.com;

origin-when-cross-origin:仅在发生跨域访问时,发送只包含host的Referer信息,但在同域下还是完整的,而只有协议、域名和端口都一致时,浏览器才认为是同域。

unsafe-url:全部都发送Referrer信息,是最宽松,也是最不安全的策略

温馨提示:

1、referrer属性的<meta> 标签需要放在 <head> ...</head> 之间,如果出现的位置不对就会被忽略。

2、如果没有content 属性,或者 content 属性值为空,也会被忽略。

3、如果 content 属性后面的取值不合法,浏览器会自动选择 no-referrer 。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
当在前端使用video标签播放第三方外链视频时,如果出现403 Forbidden错误,可能是由于Referer头字段的原因。Referer是请求头的一部分,用于表示请求的来源。在项目中打开视频时,请求头会携带Referer字段,其中包含了自身网站的域名。而直接复制链接在新窗口打开时,请求头不会携带Referer字段。第三方网站可能会认为携带了自身网站域名的访问是非法的,所以会报错403 Forbidden解决这个问题的方法是在自己项目中跳转至第三方外链时,去掉Referer信息。这样第三方网站就不会认为是非法访问了,视频就可以正常播放了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [前端播放第三方外链视频报403 forbidden的原因及解决方案](https://blog.csdn.net/Boale_H/article/details/120288101)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [播放视频报403 forbidden的原因及解决方案](https://blog.csdn.net/weixin_47619284/article/details/128802854)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值