Cross-Origin Request Blocked HLS URL

Question

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:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://{seaweedFS-URL}/gpocam/timelapses/testt-ymgqr/index.m3u8. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

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?

VLC most likely doesn't care about cross domain access while web browsers do and require proper Access-Control headers. Is it possible to add those headers to seaweedFS server? (I don't know anything about seaweedFS.) — Dogbert, Mar 31 '17 at 09:11
https://groups.google.com/forum/#!topic/seaweedfs/RuA8YK-IlY8 suggests using a proxy in front of seaweedFS to add extra headers. Or you could modify the source of seaweedFS and add the header. You won't be able to play it in any browser without that header as far as I know. — Dogbert, Mar 31 '17 at 10:51

score 0 · Accepted Answer · answered Apr 03 '17 at 12:51

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

Here is NGINX config:

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;
            }
    }

Cross-Origin Request Blocked HLS URL

1 Answers1

Linked