flv.js 跨域访问 nginx-http-flv-moudle 开启basic authentication时遇到的问题

项目流程大概是这样的，浏览器从a服务器获取到流服务器地址和用户名密码，然后从流服务器上通过basic authentication取流

这里有两点:1、跨域问题  2 、要做访问验证

是开启nginx这边的basic authentication验证，这个网上的方法很多，不在累述了，网上找了一篇，看看就会了，改好后使用vlc取流，按要求输入用户名，密码就能取到流了

然后是flv.js的使用：在createPlayer的第二个参数config里加入basic authentication的http头

例如:

            this._videoPlayerObj = FlvJs.createPlayer({
                    type: 'flv',
                    url: url,
                    isLive: true,
                }, {
                    enableStashBuffer: false,
                    stashInitialSize: 128,
                    autoCleanupSourceBuffer: true,
                    headers:{
                        'Authorization':'Basic '+btoa(unescape(encodeURIComponent("username:password")))
                    }
                }
            );

如上，其中的headers部分就是要添加上的http头部，这个属性在最新的flv.js里是支持的，作者根据使用者的反馈更新过

这时，来通过flv.j获取视频，实际还是不行的，通过抓包发现发送的请求是OPTION!!

OPTIONS /live?port=1935&app=hls&stream=jt_n127000000001_c3_s0 HTTP/1.1
Host: 192.168.110.166
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Origin: http://localhost:8090
Sec-Fetch-Mode: cors
Referer: http://localhost:8090/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

这个是夸域访问时的预检请求，网上文章很多，找几篇来看看就明白了，处理这个问题在服务端，也就是nginx端来解决，博主最后找的了这篇文章来处理的，就是在配置里加上对OPTIONS的处理，如下

if ( $request_method = 'OPTIONS' ) {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Max-Age' '604800';
      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,Access-Token,Blog-ID';
      return 200;
}

这样当方法是OPTION时，按这个脚本来返回。

到此，通过flv.js就可以访问到流了吗，不行，上面的脚本还差点

因为我们需要做basic authentication认证，会在http头里加上Authorization字段，但是上面的脚本Access-Control-Allow-Headers里并没有指明Authorization是允许的。浏览器会包如下错：

Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response

既然说authorization是not allowed，哪就把它加上

add_header 'Access-Control-Allow-Headers' 'DNT,Authorization,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Access-Token,Blog-ID';
这时，再来访问就可以了。

以上就是配置时遇到的问题并解决的全过程