| A CORS (Cross-Origin Resource Sharing) error occurs when a web page makes a request to a server from a different origin (domain, protocol, or port) than the page itself, and the server doesn't have the appropriate headers configured to allow that request. Essentially, the browser, acting as a security measure, blocks the response from the server to prevent malicious cross-site scripting attacks. 
To avoid CORS errors when a client sends data in the query string or headers with an Apache server, you need to configure Apache's mod_headers module to add the necessary CORS headers (Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers) to the HTTP responses. These headers specify which origins are allowed to access the resource, the allowed HTTP methods, and the allowed request headers, respectively. The Access-Control-Allow-Origin can be set to a specific origin, a wildcard (*), or dynamically based on the request origin if you require more granular control. Proper configuration of these headers ensures the browser allows the cross-origin request.
Below is the verified example to avoid CORS errors that based in .htaccess # HLS content settings
<FilesMatch "\.(ts|m3u8)$">
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, Accept, Content-Type, X-Requested-With, Range, If-None-Match, If-Modified-Since, Cache-Control"
Header set Access-Control-Allow-Credentials "true"
</FilesMatch>
# Content Types
AddType application/vnd.apple.mpegurl .m3u8
AddType video/mp2t .ts
# M3U8 rewrite
RewriteCond %{QUERY_STRING} (.*)
RewriteRule ^(.*)\.m3u8$ index.m3u8.php?m3u8obj=$1 [L,QSA]
You can add the additional custom Headers at Access-Control-Allow-Headers The above case is optimized for HLS. Below is for the general purpose: Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, HEAD, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, Accept, Content-Type, X-Requested-With, Range, If-None-Match, If-Modified-Since, Cache-Control"
Header set Access-Control-Expose-Headers "Content-Length, Content-Range, Content-Type"
Header set Access-Control-Allow-Credentials "true"
# Content Types
AddType application/vnd.apple.mpegurl .m3u8
AddType video/mp2t .ts
# M3U8 rewrite
RewriteCond %{QUERY_STRING} (.*)
RewriteRule ^(.*)\.m3u8$ index.m3u8.php?m3u8obj=$1 [L,QSA]
Sometimes AI kindly recommend Header always set, but it could cause overlapped settings, so you will be faced CORS error. If you still face CORS error, I recommend you to add below to /etc/httpd/conf/httpd.conf or /etc/httpd/conf.d/vhost.conf <Directory "/var/www/html">
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, HEAD, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, Accept, Authorization, Content-Type, X-Requested-With, Range, If-None-Match, If-Modified-Since, Cache-Control, ODX-User-Agent, odx-user-agent, ODX_User_Agent"
Header set Access-Control-Expose-Headers "Content-Length, Content-Range, Content-Type"
Header set Access-Control-Allow-Credentials "true"
# Allow OPTIONS requests
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
</Directory>
| 
