跨域请求阻止的HLS URL

问题描述

我们正在使用seaweedFS保存我们的图像和mp4视频文件.现在，我们计划将HLS文件保存在seaweedFS上.一切都很完美，HLS文件现在保存在seaweedFS上，但是当我们尝试在HTML5视频播放器中使用HLS URL时，会发出以下警告:

we are using seaweedFS to save our images and mp4 video file. Now, we are planning to save HLS files on seaweedFS. Everything is perfect, HLS files are now saving on seaweedFS but when we try to use HLS URL in HTML5 video player it gives following warnings:

跨域请求被阻止:相同来源策略"不允许在以下位置读取远程资源http://{seaweedFS-URL}/gpocam/timelapses/testt-ymgqr/index.m3u8.(原因:CORS标头"Access-Control-Allow-Origin"缺失).

当我在VLC中使用相同的URL时，它可以工作，但不能在浏览器的播放器中工作.有人可以在这里指出问题吗?

When I used the same URL in VLC then it works but not worked in the browser's player. Can anyone point the problem here?

推荐答案

我在seaweedFS之前使用了 NGINX 来添加其他标头.通过这种方式，我解决了我的问题.

I used NGINX in front of seaweedFS to add additional headers. Using this way I solved my problem.

这是NGINX配置:

upstream media_evercam {
            server 127.0.0.1:8888;
    }

    more_set_headers 'Access-Control-Allow-Origin: *';
    more_set_headers "Content-Type: $upstream_http_content_type";

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    server {
            listen 80;
            server_name localhost;

            location / {
                    proxy_pass http://media_evercam;
                    proxy_connect_timeout 60s;
            }
    }

这篇关于跨域请求阻止的HLS URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！