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

需求

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

实现

环境

项目打包上线

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

给需要访问的电脑安装nginx

1. 下载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;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

代码

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>
1
2
3

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

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_num
      this.$http.get('http://127.0.0.1:****/video/num.txt').then(res => {
        console.log(res.data);
        video_num = res.data
      })
    },
    //这里就实现了多个视频的依次播放和循环播放
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

• 本地localhost+指定端口,本地浏览器访问不到
  原因本地的nginx没有启动成功

• nginx启动成功，但访问不到资源
  访问的路径对不对；
  nginx.conf中的指定存放资源的路径是否正确；

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

本文重点

红色字体