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.
Related
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 am trying to setup converse on my website with BOSH, using an Apache web server. Currently, I am getting the following error:
Access to XMLHttpRequest at 'http://localhost:7070/' (redirected from 'http://localhost/http-bind') from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
This is despite the fact that I have enabled Access-Control-Allow-Origin in Apache 2.4, and the header shows up on the webpage where the client is sitting, at https://localhost/index.php. The Apache httpd.conf has, at root level:
Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Credentials true
And Apache redirects from localhost/http-bind to localhost:7070, the XMPP server's BOSH port:
RewriteEngine On
RewriteRule ^/http-bind(.*)$ http://localhost:7070$1 [L]
The XMPP server, OpenFire, has BOSH and CORS enabled.
Converse's initialize method contains this line:
bosh_service_url: 'http://localhost/http-bind',
How can I get converse on my website to use BOSH via CORS?
I am developing a HTML5 Javascript app to get an image from my local server which runs on the same machine as the app. When I run the app on my Chrome, I got:
Access to Image at 'http://localhost/someDIrectory/1.jpg' from origin
'http://localhost:50000' has been blocked by CORS policy: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:50000' is therefore not allowed
access.
From many questions here, the answers point out that I need to set
header("Access-Control-Allow-Origin: *");
in php file and it should work, but that is for php files... What about an image or a directory with images?
I have also came across How do I enable cross-origin resource sharing on XAMPP? and tried to add
<IfModule C:\xampp\htdocs\someDIrectory\1.jpg>
Header set Access-Control-Allow-Origin: *
</IfModule>
into httpd.conf. I tried restart XAMPP and retried the above. But the result I got is still the same.
How to correctly set up such setting for XAMPP?
Note: I am using Construct 2 which is basically exported out as an HTML5/Javascript. I am simply using Sprite Load From URL action.
Create a file called ".htaccess" in the directory of your files and add the following to the file.
Header set Access-Control-Allow-Origin "http://localhost:50000/"
You need to create the .htaccess file first and put it on your root document of application and then set it at the beginning of the file
Header set Access-Control-Allow-Origin *
Cheers,
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.
Suddenly, seemingly without changing anything in my web app, I started getting CORS errors when opening it in Chrome. I tried adding an Access-Control-Allow-Origin: * header. Then I get this error:
XMLHttpRequest cannot load http://localhost:9091/sockjs-node/info?t= 1449187563637. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3010' is therefore not allowed access.
But as you can see in the following image, there is no Access-Control-Allow-Credentials header.
WTF? Chrome bug?
My page is loaded at http://localhost:3010 and that server also uses Access-Control-Allow-Origin: * without problems. Is there a problem if the two endpoints both use it?
"credentials flag" refers to XMLHttpRequest.withCredentials of the request being made, not to an Access-Control-Allow-Credentials header. That was the source of my confusion.
If the request's withCredentials is true, Access-Control-Allow-Origin: * can't be used, even if there is no Access-Control-Allow-Credentials header.
Requests withCredentials:true, on a server configured with Access-Control-Allow-Origin: * CAN be used, but you will need some more extra config on your server:
Using Access-Control-Allow-Origin=* on the server, it will not allow access to any resource (that requires credentials) on any xhr CORS request.
Workarounds:
Make that remote resource on the server accesible without credentials
( and use xhr.withCredentials = false )
Create a rewrite rule on
the server, to modify the response header
Access-Control-Allow-Origin=* to the request's origin. You can
also apply this rewrite under certain criteria, for example, if
request is using certain port or it comes from a list of whitelisted
domains.
Here is some article that explains how to do this on a IIS server, but you can do this in many other servers:
PS: in case of using credentials, you will also need the following header on your server's response: Access-Control-Allow-Credentials=true
PS2: only 1 value is allowed to "access-control-allow-origin" paramenter. If you try to use for instance two domains: domain1.com domain2.com, it won't work.
I solved same problem by using these steps..
1) disable your chrome extension "Allow-Control-Allow-Origin"
2) add these into your service
var xhr = new ();
xhr.withCredentials = true;