videojs CORS 跨域 失败 无效 ,添加 add_header Access-Control-Allow-Origin *； 无效

最新推荐文章于 2024-07-31 09:57:55 发布
原创 最新推荐文章于 2024-07-31 09:57:55 发布 · 3.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了解决使用video.js播放m3u8格式视频时遇到的跨域问题的方法。提供了两种解决方案：一是通过禁用浏览器缓存进行刷新重试；二是通过在提供视频服务的Nginx配置中添加Access-Control-Allow-Origin头部信息。
06-播放器-搭建媒体服务器测试videojs
minihuabei的博客
06-23 2563
3 播放器 3.1 技术选型 视频编码后要使用播放器对其进行解码、播放视频内容。在web应用中常用的播放器有flash播放器、H5播放器或 浏览器插件播放器，其中以flash和H5播放器最常见。 flash播放器：缺点是需要在客户机安装Adobe Flash Player播放器，优点是flash播放器已经很成熟了，并且浏览 器对flash支持也很好。 H5播放器：基于h5自带video标签进行构建，优点是大部分浏览器支持H5，不用再安装第三方的flash播放器，并 且随着前端技术的发展，h5技术会越来越成熟
使用js跨域交互案例
12-25
使用js跨域交互案例，两个页面简单明了。使用js跨域交互案例，两个页面简单明了。
H5的video标签跨域.HTML的video标签跨域_跨域ajax
12-24
H5的video标签跨域.HTML的video标签跨域 我们都知道HTML video标签能播放视频 但是如果你的video要播放的是非当前域名下的视频文件,这就要跨域播放视频, 应该如何实现呢?
videoJs+ hlive JS实现m3u8格式播放
03-17
videoJs+ hlive JS实现m3u8格式播放
js跨域调用
11-19
本实例是JS跨域调用webservice！
解决video.js使用以后m3u8无法访问的跨域问题
Cinway的专栏
07-16 2万+
Tomcat服务器在192.168.2.111，编写了页面调用： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>video.js</title> <meta charset="utf-8"> <link href="https://unpkg.com/...
视频直播m3u8协议以及跨域问题和Videojs加载m3u8视频汇总
似水流年
12-18 1万+
video.js支持m3u8格式直播 https://www.cnblogs.com/saysmy/p/6429835.html 为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题，还可以有各种视频状态接口...
worker_processes 2; events { worker_connections 8192; } rtmp_auto_push on; rtmp_auto_push_reconnect 1s; rtmp_socket_dir /tmp; rtmp { server { listen 1935; chunk_size 4096; application live { live on; meta copy;#为了兼容flvj.js record off; gop_cache on;#开启GOP缓存 allow publish all; allow play all; } } } http { include mime.types; default_type application/octet-stream; sendfile off; #server_names_hash_bucket_size 128; #tcp_nopush on; #tcp_nodelay on; keepalive_timeout 65; ## Start: Timeouts ## client_body_timeout 10; client_header_timeout 10; #keepalive_timeout 30; send_timeout 10; keepalive_requests 10; ## End: Timeouts ## server { listen 9000; server_name 109.136.146.133; #http-flv的相关配置 location /live{ flv_live on; add_header 'Access-Control-Allow-Origin' '*'; # 允许所有域名 add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' '*'; # 关键：允许Range头用于流传输 add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Cache-Control' 'no-cache'; chunked_transfer_encoding on; # 处理OPTIONS预检请求 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Max-Age' 1728000; add_header 'Content-Type' 'text/plain; charset=utf-8'; add_header 'Content-Length' 0; return 204; } } location /stat { rtmp_stat all; rtmp_stat_stylesheet stat.xsl; } location /stat.xsl { root nginx-rtmp-module/; } location /control { rtmp_control all; } location / { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; root html; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }这是我的流媒体服务器配置
10-14
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' '*'; add_header 'Access-Control-Allow-Credentials'...
前端videoJs在哪里添加Access-Control-Allow-Origin:*
09-11
add_header 'Access-Control-Allow-Origin' '*'; # 其他配置... } ``` 2. 如果视频资源不由你控制，那么需要联系视频资源的提供者，在他们的服务器上进行相应的设置。 3. 如果是在开发环境中，为了方便调试，也...
<video class="fullscreen-video" :src="currentVideoUrl" controls preload="auto" controlsList="nodownload" disablePictureInPicture crossorigin="anonymous" @error="handleVideoError" ></video>解决播放跨域问题
最新发布
12-19
add_header 'Access-Control-Allow-Headers' 'origin, x-requested-with, content-type'; # 允许的请求方法 add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; } ``` ### Apache 服务器 在 `....
video.js 跨域
03-03
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-...
vue使用video播放视频跨域问题“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin
海贼王某人的博客
07-31 2399
起因：项目需要加一个视频播放功能，线上资源和网页url不是一个域名，导致跨域了无法播放，报错。我真的服了，网上答案十个九个都是错的，那些人发出来的东西自己都不验证一下吗，多了一个 i 让我好找啊，最后还是解决了，如果你用crossOrign无法解决就把 i 加上吧，我也不知道什么原因，反正的我不加 i 就可以播放了，记录一下这个大坑。注意：是crossOrign=“anonymous”，不是crossOrigin=“anonymous”
使用videojs访问m3u8文件时的跨域问题
weixin_30540691的博客
01-04 6471
我访问的是阿里云上cdn的m3u8地址，使用video.js和videojs-contrib-hls.js播放视频时，提示跨域。 原因是阿里云的资源不允许跨域访问，以下为解决办法： 阿里云→产品与服务→CDN→设置HTTP头 点“确定” 然后，再去你的页面播放视频，就可以了。 转载于:https://www.cnblogs.com/FightingJia/p/819427...
js跨域拒绝访问
loki的学习笔记
06-07 3204
function adjustSize(){ var frame1=document.getElementById("iframe1"); alert(frame1.document.body.scrollHeight); //alert(frame1.document.body.scrollHeight); frame1.style.Height=frame1.documen
nginx设置add_header失效 配置cors跨域失效无效的解决方案
记录与分享
08-27 6600
nginx配置跨域/设置add_header失效的解决方案
js跨域
hrecho的专栏
03-14 401
js跨域指的是通过js在不同的域之间进行数据传输或通信一、前端与前端跨域（主域相同）在项目中经常会出现这种问题，比如M站中的视频课页面，在html中嵌套了一个iframe（里面是video视频），本身的域名是 m.genshuixue.com，iframe的域名是 www.genshuixue.com；现在我们需要在页面底部做一个按钮，点击时让iframe中的video开始播放。在这种情况下，两个...
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
热门推荐
qq_50523945的博客
06-06 2万+
另外，规范要求，对那些可能对服务器数据产生副作用的HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。给Nginx服务器配置`Access-Control-Allow-Origin *`后，表示服务器可以接受所有的请求源（Origin）,即接受所有跨域的请求。
video.js的请求头问题
猜测
05-09 1658
最后我找别人的示例试了下，发现关键点其实在type，只有“application/x-mpegURL”才能加headers，mp4文件就不会加……看它源码，发现根本就没调用XhrFunction，然后手动videojs.Vhs.xhr()，结果虽然调用了，但依旧不行……为了防止视频被轻易下载，我们项目需要在请求视频地址的时候，增加token识别，避免url一粘贴到浏览器地址上就能被盗。试了无数遍就是加不上，然后搜索有些答案说版本问题，又重安了好几个版本，也不行……
Video.js
GaraMaps的博客
09-05 2033
Video.js 初始化video.js 编写HTML页面：   videojs.options.flash.swf = "include/video-js/video-js.swf"       <source src="video/video.mp4" type='video/mp4' />      播放视频需要启用 JavaScript，推荐使用支持
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值