【案例】【技术难点（已解决）】vue 线上项目访问本地资源访问不到、跨域等问题的解决方法

需求

在访问线上项目，从访问的电脑本地获取资源。
真正需求就是要访问本地多个视频已打包好的项目中播放并循环播放

实现

环境

项目打包上线

对于项目如何打包上线，这里笔者就不多说啦，因为会遇到这个需求的肯定会布署项目
前后端分离：前端项目布署到服务器
nginx部署vue项目：多个项目、相同的端口下
nginx部署多个vue项目，不同端口号下

给需要访问的电脑安装nginx

下载nginx http://nginx.org/en/download.html
2. 安装这里就不说了
安装完成后，创建一个video文件夹，创建一个num.txt，写入视频的数量就可以了，其和视频资源都在video文件夹中

 listen       8888;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;location /video/ {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';if ($request_method = 'OPTIONS') {return 204;}alias D:/nginx/video/;   #视频资源存放的路径autoindex on;}location / {root   html;index  index.html index.htm;}

代码

video_url是为了动态获取访问地址；
autoplay表示视频准备好就播放；
controls 视频控制按钮；
muted 静音；
loop 循环播放；
更详细的video标签属性介绍：https://www.runoob.com/tags/tag-video.html
这里为啥我没有用loop后面代码中说明到


<video :src="video_url"  preload="auto" style="width:100%;height:100%;vertical-align:meddle;" autoplay controls height="100%" width="100%" muted>
</video>

mounted() {this.watch_video_file(this.i);  //视频，这里i设置一个默认值1
}


watch_video_file(i) {   //多个视频连续播放，并播放完成后，重头播放var video_num = ''//组装访问本地视频的接口this.video_url = 'http://127.0.0.1:****/video/'+ i +'.mp4'  var video = document.getElementById('video');//当视频播放完成后，从第0秒开始播放function setCurTime(){video.currentTime=0;}//当一个视频播放完成后，i发生变化，地址发生变化，变为2，当i等于video_num时，i就有等于1，相当于从头播放video.addEventListener('ended',function(){if( Number(video_num) == Number(i)){i = 1}else{i++}setCurTime();this.video_url = 'http://127.0.0.1:****/video/'+ i +'.mp4'video.src = this.video_url;video.play();},false);//通过获取num.txt的值赋给video_numthis.$http.get('http://127.0.0.1:****/video/num.txt').then(res => {console.log(res.data);video_num = res.data})},//这里就实现了多个视频的依次播放和循环播放

过程中遇到的问题及如何解决

本地localhost+指定端口,本地浏览器访问不到
原因本地的nginx没有启动成功
nginx启动成功，但访问不到资源
访问的路径对不对；
nginx.conf中的指定存放资源的路径是否正确；
前面两个都没问题，就是项目访问不到
（这里问题困扰了笔者好几天，还请教了朋友，就是找不到问题，这是为啥呢，因为有两台电脑都可以线上项目可以访问到本地资源，视频可以正常跑，但其余的都不行，他哥的，我就不信了，周末休假都在这是那的问题，一步一步的排查，回想，想到是有可能是啥问题后就立马回公司去调试，还是不行，成功的和不成功的配置过程中操作有哪些不同，忽然笔者想到了，就又回公司试试了，成功，此时还不确定是这个问题，周一用其它电脑试了试，确认是浏览器的问题，因为随着浏览器的版本更新，浏览器中默认设置了不允许私密访问，这是为了安全考虑的），说了这么多告诉你解决方案，其实很简单
打开谷歌浏览器搜索Chrome://flags 找到 Block insecure private network requests. 修改为disabled就好了

本文重点

红色字体

【案例】【技术难点（已解决）】vue 线上项目访问本地资源访问不到、跨域等问题的解决方法相关推荐

解决html访问本地数据时出现的跨域问题
问题: 由于现在有很多好用的网页可视化工具,经常需要加载本地的数据来进行绘制网页,但是直接使用ajax访问时会提示has been blocked by CORS policy.因此查询可用的方法. ...
小米5s+刷+android+8.0,小米MIUI10技术难点已突破，小米5S系列升级安卓8.0看来稳了...
原标题:小米MIUI10技术难点已突破,小米5S系列升级安卓8.0看来稳了自从小米MIUI10发布之后,很多小米用户都在等待着更新包的到来,其实这次更新的变化还是非常大的,更新推送出来的第一时间就有 ...
26、vue前端出现跨域问题，如何解决跨域？
问题: 因为浏览器的同源策略的限制问题(协议.主机.端口一致),浏览器访问非同源的网址时,会出现无法获取数据(已发请求,服务器已收到请求),出现跨域问题 3种解决方法: 1.cors跨域(配置服务器) ...
Access-Control-Allow-Origin VUE本地调试跨域问题使用nginx解决
最近在使用VUE做前后端分离的项目,页面代码开发好了,连接后台获取数据的时候发现怎么都调不到后台接口,页面F12的信息如下: 如图所示:重点已经圈起来了 (Access-Control-Allow-O ...
解决vue项目eslint校验 Do not use ‘new‘ for side effects 的两种方法
解决vue项目eslint校验 Do not use 'new' for side effects 的两种方法参考文章: (1)解决vue项目eslint校验 Do not use 'new' fo ...
[vue] 怎么解决vue打包后静态资源图片失效的问题？
[vue] 怎么解决vue打包后静态资源图片失效的问题? 上面蛮多回答感觉像开玩笑似的,静态资源图片失效分几种情况. 1.确定线上环境是否在根路径上,配置资源根目录,vue-cli2 和 vue-cl ...
解决firefox和IE9对icon font字体的跨域访问问题
解决firefox和IE9对icon font字体的跨域访问问题参考文章: (1)解决firefox和IE9对icon font字体的跨域访问问题 (2)https://www.cnblogs.co ...
PHP的介绍及应用,ajax的介绍及应用，跨域问题及jsonp解决方法
PHP(服务器编程语言) 服务器由环境(Apache),数据库(mysql),代码(HTML+css +js,php)组成. PHP必须在服务器的环境下执行 php与js最大的区别就是工作环境,PHP ...
process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署
process.env.NODE_ENV与@vue/cli-service及其.env.*默认外部环境配置文件之跨域部署目录 process.env.NODE_ENV与@vue/cli-servic ...

【案例】【技术难点（已解决）】vue 线上项目访问本地资源访问不到、跨域等问题的解决方法

需求

实现

环境

项目打包上线

给需要访问的电脑安装nginx

代码

过程中遇到的问题及如何解决

本文重点

【案例】【技术难点（已解决）】vue 线上项目访问本地资源访问不到、跨域等问题的解决方法相关推荐

最新文章

热门文章

【案例】【技术难点（已解决）】vue 线上项目访问本地资源 访问不到、跨域等问题的解决方法

需求

实现

环境

项目打包上线

给需要访问的电脑安装nginx

代码

过程中遇到的问题及如何解决

本文重点

【案例】【技术难点（已解决）】vue 线上项目访问本地资源 访问不到、跨域等问题的解决方法相关推荐

最新文章

热门文章

【案例】【技术难点（已解决）】vue 线上项目访问本地资源访问不到、跨域等问题的解决方法

【案例】【技术难点（已解决）】vue 线上项目访问本地资源访问不到、跨域等问题的解决方法相关推荐