I want to Show an HLS Live stream on my site, but I'm getting "XMLHttpRequest cannot load "Link".m3u8.key. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'My site' is therefore not allowed access. The response had HTTP status code 403."
Header information:
Now this is how another site has it: (Working site)
I know it has something to do with Set-Cookie for the .m3u8 playlist to play, I also have
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials: true
In .htaccess...
I'm a completely new to all of this but if someone can help me, that'll be much appreciated.
Related
I am getting following error
Access to fetch at 'https://mywebsite.com/private-post.html'
(redirected from 'https://api.mywebsite.com/login')
from origin 'https://mywebsite.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
If an opaque response serves your needs,
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I have following cors preflight set to https://api.mywebsite.com. https://mywebsite.com is static website. I am not sure if it has cors.
Access-Control-Allow-Origin: ['https://mywebsite.com', 'https://api.mywebsite.com']
Access-Control-Allow-Headers: [*]
Access-Control-Allow-Methods: [DELETE, GET, OPTION, PUT, HEAD, PATCH, POST]
Access-Control-Allow-Credentials: true
So first I make post request from https://mywebsite.com/login.html to https://api.mywebsite.com/login endpoint. And after successuful login I am doing following redirect with lambda. While having above cors. And I cannot redirect to any page because of error above.
const response = {
statusCode: 303,
headers: {
'Location': 'https://mywebsite.com/private-post.html'
}
}
return response
Edit
I tried setting Access-Control-Allow-Origin: [*] but then I cannot set Access-Control-Allow-Credentials: true.
So to fix that I set Access-Control-Allow-Origin: ['https://*'] now I can allow credentials however on redirect the cors error still remains the same.
https://mywebsite.com is static website. I am not sure if it has cors.
The error message days it doesn’t but, since you are trying to read the content with JS, it needs to.
You can’t use a redirect to grant CORS permission for a resource you don’t control. If you could, then an attacker could (for example) create a site that redirects to your online banking, and then have JS on their attacking site access your accounts through it. It would make the Same Origin Policy worthless.
I'm using the Fetch API in Javascript to fetch an image from a cross-origin apache server (which I control) but I'm getting the following errors:
SEC7120: [CORS] The origin 'http://origin.com' did not find 'http://origin.com' in the Access-Control-Allow-Origin response header for cross-origin resource cross-origin.com/….jpg
HTTP401: DENIED - The requested resource requires user authentication.
(Fetch)GET cross-origin.com/….jpg
Below is the javascript which creates the request object to fetch the jpg:
var authb64 = btoa(\'' . $xrefrec['ftp_username'] . ':' . $xrefrec['ftp_password'] . '\');
const request = new Request(document.getElementById(thm.photo_id).href,{
\'Access-Control-Request-Headers\': \'Authorization\',
\'Options\': \'* HTTP/1.1\',
\'Authorization\': \'Basic \' + authb64,
\'Origin\': \'http://origin.com\',
\'Credentials\': \'include\',
\'Cache\': \'no-cache\',
\'Mode\': \'cors\',
\'Method\': \'GET\'
});
The code creates an anchor tag, passes the request to fetch(), then awaits the Promise to resolve.
On the server, I've setup a .htaccess file in the directory where the images reside, as follows:
AuthName "Client Only"
AuthType Basic
AuthBasicProvider dbm
AuthDBMUserFile "C:/Bitnami/wampstack-7.3.11-0/apps/.../conf/.htdbm-users"
Require user (valid user id)
RewriteRule ^/(clientgalleries).*$/ $1
Header set Access-Control-Allow-Methods "GET,OPTIONS"
Header set Access-Control-Allow-Credentials "true"
Header set Cache-Control no-cache
Header set Access-Control-Allow-Headers "Authorization,Access-Control-Allow-Origin"
Header set WWW-Authenticate: Basic
Header set Access-Control-Allow-Origin "http://origin.com"
If I understand it correctly, you're trying to make a CORS request from an unknown domain (you haven't shared it - thats ok) to origin.com. Is this correct?
The Origin header cannot be changed by your JavaScript code. For example if you have javascript from A.com requesting the image from B.com, then B.com must allow A.com in its Access-Control-Allow-Origin header.
I've tried to fetch data from Wordpress API in Vue App.
I am using DigitalOcean with Apache.
I've set Header set Access-Control-Allow-Origin "*" in vhost.
But now I've got an error like this:
Access to XMLHttpRequest at xxx from origin 'http://localhost:3000' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:3000, *', but only one is allowed.
I am using axios for requests.
Do you have any ideas what's going on?
Is it server side issue or should I set something in axios config?
Thanks.
This is a server-side issue. You need to enable CORS in your apache config, by either:
Setting Header set Access-Control-Allow-Origin "*" - meaning that all origins are allowed to make requests to this server
Setting Header set Access-Control-Allow-Origin "http://localhost:3000"
This tells the server to accept requests from this origin(s), to further explain.
https://enable-cors.org/server_apache.html
Change your header set statement to:
Header always set Access-Control-Allow-Origin "*"
Otherwise Apache will prepend origin in request to the header, which causes the issue.
I have the following in my .htaccess file:
Header set Access-Control-Allow-Origin: "*"
It works perfectly! But it is bad security practise.
When I change it to:
Header set Access-Control-Allow-Origin: "http://example.com"
I get the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com/oc/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2?v=4.4.0. (Reason: CORS header 'Access-Control-Allow-Origin' does not match 'http://example.com').
How do I handle this?
From the live site:
Font from origin 'http://arvindint.com' has been blocked from loading by Cross-Origin Resource Sharing policy: The 'Access-Control-Allow-Origin' header has a value 'http://arvindint.com' that is not equal to the supplied origin. Origin 'http://www.arvindint.com' is therefore not allowed access.
From a comment from the OP:
Please note, I get this error when accessing the website through www.example.com instead of example.com
That is your problem.
If you give permission to example.com but not to www.example.com then you can't access it from www.example.com.
Permissions are on a per-origin basis, not on a per-second-level-domain basis.
Pick one of the two host names (with or without www) and stick to it. Redirect from one to the other. Don't host your site on two different host names. Doing so is more trouble than it is worth.
I am trying to load web fonts from a CDN, but am getting a Cross Origin Request error. I have set the following headers in my httpd conf file:
Header Add Access-Control-Allow-Origin: my-cdn-domain
and
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
and I see the Access-Control header in the console, but the fonts still do not load.
Does anyone have any ideas?
It turns out that this had to do with us moving the site over to https. When we moved the site, we didn't update the origins in the cdn to be https also and that was causing the source to actually be our non-https server!
Header Add Access-Control-Allow-Origin: my-cdn-domain
Your CDN domain has to give permission to your HTML domain, not the other way around.