Access-Control-Allow-Origin in WOrdpress

Marco Gasi
Marco Gasi used Ask the Experts™
on
Hi everybody.
I have a Wordpress website hosted in 1and1. Trying to display a live streaming using FV Player, if I enable HLS.js (as suggested) to ensure the video be displayed in modern browsers and in mobile, the video is not displayed and the message in the console is "CORS header ‘Access-Control-Allow-Origin’ missing".

I tried to set Access-Control-Allow-Origin both in the htaccess:
<FilesMatch "\.(php)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>

Open in new window

and in the file header.php adding these lines:
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Methods: PUT, GET, POST");
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

Open in new window

I tryed these solutions one by one and both together but with no success. In the console I always see the same message.

Any idea?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David FavorFractional CTO
Distinguished Expert 2018

Commented:
Keep in mind...

1) If you self host your video, then you require no ACL control.

2) If you use a hosting service like YouTube or Vimeo or any service, they handle this for you.

3) If you're linking to an offsite video which doesn't allow this, then the site hosting your video must implement ACLs which allow other people to access the video.

So, post your entire HTML file + likely someone can assist you.

Trying to guess about why cross domain ACLs aren't working... near impossible...

Just be sure you understand which side of the fence (your site or site where video lives) where the cross domain exception must be added.
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
Hello David, thank for trying to help me. This is the story: a client with a running site asked me to show him an example of a new design for the site.

So I have visited his website and I have taken from that some text and data to build my example. In current website the video is displayed correctly both in desktop and in mobile. I'm using the same plugin used in the original website, even if I have an updated version.

The video is a rtmp source hosted in a third server.

As I said I can display the video only with HLS.js disabled.

I don't think the problem be in the video source server, otherwise it shouldn't work even in the original website.

The full message is:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://xx.xxx.xxx.xx:8080/live/stream.m3u8. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Open in new window


I'm not sure but since the original website can display the video both in mobile and in desktop, I guess the problem is with my server but whatever I do it just doesn't work.
Ryan ChongSoftware Team Lead

Commented:
Did some Access-Control-Allow-Origin handling in ASP.NET but not in php...

from this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://xx.xxx.xxx.xx:8080/live/stream.m3u8. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

it seems that the http response header "Access-Control-Allow-Origin" is still not being added. Can you go to browser's Inspect and see if that http response header appearing there?
Starting with Angular 5

Learn the essential features and functions of the popular JavaScript framework for building mobile, desktop and web applications.

Marco GasiFreelancer
Top Expert 2010

Author

Commented:
Hi Ryan, thank you for trying to help. I have enabled HLS.js and reloaded the page.
Using Firefox, I get these request headers:
Host: xx.xxx.xxx.xx:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://site.example.com/client-tv/
Origin: http://site.example.com
DNT: 1
Connection: keep-alive
Cache-Control: max-age=0

Open in new window

and these are response headers
HTTP/1.1 200 OK
Connection: Keep-Alive
Content-Length: 261
Content-Type: application/vnd.apple.mpegurl
Server: SRS/2.0.217(ZhouGuowen)

Open in new window

It looks like I'm not able to set those headers...
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
But wait. Looking at headers I noticed that if I filter requests by the rtmp ip address and I copy the item as cURL I get 2 identical strings where the referer is the original website even for the request which is sent by my example website. So I guess that the response is positive only if request comes from the original website (something like Google does for the apps you create in developer console, where you can limit the app to response only to request that come from a specific source... Maybe it's something like this?
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
In my console I also see that the column Cause is different :

original website: Cause = media
my website: Cause = objectSubdoc

No idea about what this could mean...
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
Also, original request url for video is http://xx.xxx.xxx.xx:8000/; but if I use this url I get the objectSuboc as Cause of the GET method and there is no headers at all...
This is going to be always more confusing.
Freelancer
Top Expert 2010
Commented:
No solution for this problem. Thank you for trying.
Marco GasiFreelancer
Top Expert 2010

Author

Commented:
Once I could choose my own answer as solution but award points to those experts who tried to help: it looks like this is no more possible...

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial