Access-Control-Allow-Origin in WOrdpress

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?
LVL 32
Marco GasiFreelancerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David FavorLinux/LXD/WordPress/Hosting SavantCommented:
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.
0
Marco GasiFreelancerAuthor 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.
0
Ryan ChongBusiness Systems Analyst , ex-Senior Application EngineerCommented:
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?
0
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Marco GasiFreelancerAuthor 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...
0
Marco GasiFreelancerAuthor 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?
0
Marco GasiFreelancerAuthor 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...
0
Marco GasiFreelancerAuthor 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.
0
Marco GasiFreelancerAuthor Commented:
No solution for this problem. Thank you for trying.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Marco GasiFreelancerAuthor 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...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
WordPress

From novice to tech pro — start learning today.