前端播放第三方外链视频报403 forbidden的原因及解决方案

简介: 前端播放第三方外链视频报403 forbidden的原因及解决方案


背景及原因

如下,前端通过video标签播放第三方外链视频,报错 403 forbidden

<video className="preview-player" controls autoPlay src={beforeVideoUrl}

然而直接复制地址,在新窗口打开,却没有任何问题,可以正常访问。

我们打开控制台,可以看到在项目中打开,数据请求的请求头多了一个Referer: http://localhost:3000/

而复制链接在新窗口直接打开,请求头中并不会携带Referer

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

解决办法

直接在index.html添加以下代码

<meta name=referrer content=no-referrer>

video标签正常配置

<video className="preview-player" controls autoPlay src={beforeVideoUrl}

即可正常播放第三方外链视频

目录
相关文章
|
2月前
|
JSON 前端开发 安全
前端开发中的跨域解决方案探究
跨域是前端开发中常见的问题之一,本文将探讨跨域的概念、产生的原因,以及常见的解决方案,包括JSONP、CORS、代理等。通过本文的学习,读者可以深入了解跨域问题及解决方案,为自己的前端开发工作提供参考。
|
2月前
|
JSON 前端开发 安全
前端开发中的跨域问题及解决方案
在前端开发中,跨域是一个常见但又令人头疼的问题。本文将深入探讨跨域产生的原因以及一些常见的解决方案,帮助开发者更好地理解和处理跨域情况。
|
2月前
|
缓存 监控 前端开发
前端性能优化以及解决方案
前端性能优化关乎用户体验和网站竞争力,包括减少HTTP请求、使用CDN、压缩资源、延迟加载、利用浏览器缓存等策略。制定优化计划,使用监控工具,遵循最佳实践并持续学习,能提升网站速度和稳定性。
46 0
|
2月前
|
资源调度 前端开发
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
编译第三方前端项目时候出现Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent‘)
138 0
|
7天前
|
开发框架 前端开发 JavaScript
现代前端开发中的跨平台解决方案比较与应用
在现代软件开发中,跨平台解决方案成为了开发者们的热门话题。本文将探讨几种主流的跨平台开发框架及其特点,重点比较它们在前端开发中的应用场景和优劣势。通过对比分析,读者可以更好地理解如何选择适合自己项目需求的跨平台解决方案。
|
3天前
|
前端开发
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
ElementPlus卡片如何能够一行呈四,黑马UI前端布局视频资料,element样式具体的细节无法修改,F12找到那个位置,可能在其他组件写了错误,找到那个位置,围绕着位置解决问题最快了,卡片下边
|
5天前
|
前端开发 PHP 数据格式
【附带效果视频】php接口给前端返回流式数据,php使用event-stream进行数据推送,循环一次输出一次
【附带效果视频】php接口给前端返回流式数据,php使用event-stream进行数据推送,循环一次输出一次
9 0
|
2月前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
2月前
|
编解码 前端开发 JavaScript
纯前端也能实现视频转GIF
纯前端也能实现视频转GIF
|
2月前
|
前端开发 安全 JavaScript
有哪些常见的前端问题和解决方案
【4月更文挑战第13天】前端开发常见问题及解决方案:页面渲染性能优化(减少重绘、回流,利用GPU加速,代码拆分)、响应式设计(媒体查询、弹性布局)、浏览器兼容性(使用前缀,兼容性库,浏览器嗅探)、事件处理(事件委托、防抖节流)、代码组织(模块化、构建工具)、安全性(输入验证、HTTPS、安全HTTP头)和资源加载(CDN、资源优化、错误处理)。
229 6

热门文章

最新文章