HTML请求nginx服务器视频关于跨域问题

这边是我在编写前端视频播放时遇到的问题。

Access to fetch at ‘http://192.168.31.66:9999/zzh-1586620072-2020-04-11-23_47_52.flv’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

翻译过来就是：

CORS策略已阻止从“http://192.168.31.66:9999/zzh-1586620072-2020-04-11-23_47_52.flv”“from origin”“http://localhost:8080”获取信息的访问：请求的资源上不存在“Access Control Allow origin”头。如果不透明响应满足您的需要，请将请求的模式设置为“no cors”，以便在禁用cors的情况下获取资源。

跨域问题的原因：浏览器出于安全考虑，限制访问本站点以为的资源。

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略限制以下几种行为：
1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送
常见跨域场景
1.)同一域名下的不同文件或路径，允许访问。
2.)同一域名下的不同端口， 不允许访问等等。

解决方案

针对上面的错误提示，采用的解决方案是通过在被请求的资源文件中添加 'Access-Control-Allow-Origin’来解决跨域问题。在nginx的视频播放链接前调用前面。

add_header 'Access-Control-Allow-Origin' '*'; #允许所有来源访问

以及‘Access-Control-Allow-Methods’ 来解决当前的访问方式

add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; #允许访问的方式

将这加在你的nginx服务器需要访问的协议服务里面。
下面展示一些 内联代码片。

http{
    server {
        listen      9999;
        server_name localhost;
        add_header 'Access-Control-Allow-Origin' '*'; #允许所有来源访问
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE'; #允许访问的方式

显示效果