Xampp Access-Control-Allow-Origin error

Question

I'm using Xampp server to access my video file and then play it on my website. I'm using a XMLHttpRequest to obtain the video file and then put it as the source of the video player. But I'm getting an error. I have tried to solve the problem by inserting Header set Access-Control-Allow-Origin "*" but I'm still not able to fix the problem. I have given my codes and the error below. Please Help Me.

Also I do not want any suggestion on alternative method of showing the video. I wish to use the XMLHttpRequest.

My sample code:

<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <video video-player width="640" height="360" controls></video>
    <script>
        var video_player = document.querySelectorAll('[video-player]')[0];

        // I ORIGINALLY USE MY http://localhost:8080/.... FOR THE 'var url' BUT FOR STACKOVERFLOW I'M USING THE LINK BELOW AS AN EXAMPLE 
        var url = "http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4";
        
        request_xhr (url, function (buffer)
        {
            video_player.src = buffer;
        });

        function request_xhr (url, cb)
        {
            var xhr = new XMLHttpRequest;
            xhr.withCredentials = true;
            xhr.open('get', url, true);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function ()
            {
                cb(xhr.response);
            };
            xhr.send();
        }
    </script>
</body>
</html>

My .htaccess in the directory C:\xampp\htdocs\:

Header set Access-Control-Allow-Origin "*"

My error:

With credentials you'll also need `Header set Access-Control-Allow-Credentials true` — ippi, Jul 04 '18 at 04:21
does changing `xhr.withCredentials = false;` help? (based on reading the error that should help) - if not, then you'll need to set the `Access-Control-Allow-Origin` response to be the same as the requests `Host` header - of course, test.html will have to be served using `http://` and not `file:///` — Jaromanda X, Jul 04 '18 at 04:26
origin "null" suggests that the html page is loaded using `file:///`, and not `http://`? — Jaromanda X, Jul 04 '18 at 04:28
one more thing, can `video_player.src` be set to an arraybuffer anyway? — Jaromanda X, Jul 04 '18 at 04:31
Then I think @JaromandaX got it right. If you are opening your sample.html directly, just stop it and run it from your dev server instead (http://localhost/sample.html or similar). — ippi, Jul 04 '18 at 04:56

score 0 · Answer 1 · answered Jul 04 '18 at 06:46

First of all, if you are using withCredentials then wildcard * can not be used as a value for Access-Control-Allow-Origin. You must set the host address of your website instead of *. Second reason is Origin being null, which means the web page is not served by actual server as mentioned in comments by Jaramonda.

score -1 · Answer 2 · edited Jul 04 '18 at 05:56

-1

Use attribute in video element crossorigin and set its value to anonymous:

document.getElementById("videoPlayer").setAttribute("crossorigin", "anonymous");

edited Jul 04 '18 at 05:56

Ooker

1,969
4
28
58

answered Jul 04 '18 at 04:17

Asif Ali

26
3

since XHR fails before the src is set, this wont help – Jaromanda X Jul 04 '18 at 04:31
since its not a url its a blob url i guess because data is received in xhr as arraybuffer so video element does not play blob url unless its crossorigin is anonymous – Asif Ali Jul 04 '18 at 04:39
did you try creating blob url from arraybuffer video_player.src = window.URL.createObjectURL(new Blob([new Uint8Array(buffer)])); – Asif Ali Jul 04 '18 at 04:49

score -1 · Answer 3 · answered Jul 04 '18 at 04:20

-1

Try to enable it by php

header("Access-Control-Allow-Origin: *");

answered Jul 04 '18 at 04:20

Moch. Rizal Rachmadani

184
1
6

what does php have to do with a video URL? – Jaromanda X Jul 04 '18 at 04:25
That would only work if OP was echoing out the resource from php there is no indication they are doing that – Patrick Evans Jul 04 '18 at 04:26
I can't use PHP file – aman Jul 04 '18 at 04:44
You say using xampp, i guess that you render the file by php – Moch. Rizal Rachmadani Jul 04 '18 at 04:45
Using xampp server to get video file and picture. I'm able to receive the video file in my android app – aman Jul 04 '18 at 04:46
By error message displayed, would it need a credentials to access the video? – Moch. Rizal Rachmadani Jul 04 '18 at 04:47
https://stackoverflow.com/questions/21850454/how-to-make-xmlhttprequest-cross-domain-withcredentials-http-authorization-cor hope this helps – Moch. Rizal Rachmadani Jul 04 '18 at 04:50
@Moch.RizalRachmadani I got no clue to if credentials are required – aman Jul 04 '18 at 04:53

score -1 · Answer 4 · answered Jul 04 '18 at 04:46

-1

create blob url from arraybuffer like this

window.URL = window.URL || window.webkitURL request_xhr(url, function (buffer) { video_player.src = window.URL.createObjectURL(new Blob([new Uint8Array(buffer)])); });

answered Jul 04 '18 at 04:46

Asif Ali

26
3

the `request_xhr` is getting an error = `[js] ';' expected` && `function request_xhr(url:any, cb:any):void` – aman Jul 04 '18 at 04:51

Xampp Access-Control-Allow-Origin error

4 Answers4