I have a website www.1.com which access to font on a subdomain sub.1.com
When I load the page, I have the famous "blocked by CORS policy, no access-control-allow-origin."
So, I add in the root of my subdomain a .htaccess with :
<FilesMatch ".(eot|otf|ttf|woff|woff2)">
Header always set Access-Control-Allow-Origin "*"
</FilesMatch>
I tried with mod_header.c and other.
But none work !
What did I wrong ?
Thank you for your help, I know there is a lot of question regarding CORS, but I really do not understand what I'm doing wrong...
Looks like you need to replace 'set' with 'add' and remove 'always'.
Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
You could also set the headers in wordpress functions.php file like so
function add_cors_http_header(){
header("Access-Control-Allow-Origin: *");
}
add_action('init','add_cors_http_header');
Both of these should get you taken care of.
Related
My WordPress website on a subdomain [ collective.terakaia.com ] has recently stopped loading font assets with the following errors in the console. Apologies in advance as I know there are several existing threads regarding the CORS policy issue. I just haven't been able to get any of them to work for my particular situation.
Console Errors:
Access to font at 'https://secureservercdn.net/198.71.233.51/e9h.41e.myftpupload.com/wp-content/themes/gridlove/assets/fonts/raleway-semibold-webfont.ttf' from origin 'https://collective.terakaia.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've attempted a few modifications to the .htaccess with no success. Here is the current .htaccess file code:
<ifmodule mod_headers.c="">
SetEnvIf Origin "^(.*\.terakaia\.com)$" ORIGIN_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
Header set Access-Control-Allow-Methods: "*"
Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</ifmodule>
It's very possible that this is just a simple syntax error that I'm just not aware of. I don't have much experience dealing with this kind of issue.
Any help is appreciated, thank you!
Looks like the most recent update of Chrome solves the issue.
Note: I am using Wordpress and serving the media files, css, js, etc. through Amazon CloudFront/S3.
Hello,
I know there are a lot of posts like this but I am still struggling. I was able to fix this issue for a majority of the font files that I am loading, however, this one continues to be an issue.
Access to Font at 'http://mycloudfrontID.cloudfront.net/wp-content/themes/bridge/css/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3' from origin 'http://mydomainname' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://maxmajor.net' is therefore not allowed access.
The other font files are fine after I added this to my CORS policy on AWS S3:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
and this is in my .htaccess:
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Any ideas why this error is still firing?
Thanks,
Brian
Try to change:
Header set Access-Control-Allow-Origin "*"
with this:
Header add Access-Control-Allow-Origin "*"
Also I read
How does Access-Control-Allow-Origin header work?
Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy
that for security reasons you have to include your URL.
So, your .htaccess should have this:
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
Header add Access-Control-Allow-Origin "http://mysitename.com"
</IfModule>
</FilesMatch>
Works for me!
Have you considered referring the following thread?
CORS Issue with woff2 fonts behind CDN in Chrome
It says
Turns out that the problem was actually with the Content-Type. As soon as I changed the content type to application/font-woff2 and invalidated the cache of these woff2 files, everything went through smoothly.
Are you sure that you are sending Authorization headers with your GET requests for the fonts?
If not, in your S3 CORS policy change
<AllowedHeader>Authorization</AllowedHeader>
to
<AllowedHeader>*</AllowedHeader>.
This tiny miss had bugged me for a month.
I am trying to get mp4's to download immediately when they are opened. And I've succeeded at that. However, I'm also trying to make this happen, only when the link is accessed from a specific subdomain. I run a Wordpress Multisite
I've run the following code in the Ifmodule to no avail. All the videos download immediately, no matter where they are accessed from. I'm pretty sure I'm using the conditioning wrong, but I can't find a good example of how to do this.
RewriteCond %{HTTP_HOST} ^www\.subdomain.example\.com$
<FilesMatch "\.(mp4|MP4)">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
Thanks for reading! (Double thanks for any help.)
Put the FileMatch directive in the vhost configuration for your domain. So, if the file sub.conf contains information about www.subdomain.example.com, you just have to add the following there:
<FilesMatch "\.[mM][pP]4">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
I would like to send no-cache headers if user is admin like current_user_can('administrator')
So browser will not cache some resurces.
(In order to prevent ctrl + f5 everytime)
Near solutions also welcome.
During seaching I found that
RewriteCond %{HTTP:Cookie} !(wordpress_logged_in_|wp-postpass_) [NC]
is it possible to send no-cache header with above approach?
simply, you can put the admin area in a separate folder other than the folder of the public website and set cache for that folder as follows:
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
max-age = time in seconds .. set it to 1800 or something to last for 30 mins
other than that, no, htaccess can't check if a "user" is admin or not, you have to do it with php
htaccess can't access sessions, so no you can't check if the user is logged or whatever in it. But as said before, you can check it in PHP, and as you use Wordpress, you could put this in your functions.php :
function admin_nocache() {
if(is_admin()) {
nocache_headers();
}
}
add_action( 'init', 'admin_nocache' );
See https://codex.wordpress.org/Function_Reference/nocache_headers
I've read almost every post on stackoverflow in regards to CORS and whatever I try does not work. Here is my setup:
Ubuntu (digital ocean)
nginx
cdn: cdn77.com (not amazon)
cloudflare
wordpress with wp fastest cache
Each time a new setting was done I've purged cloudflare and restarted nginx.
This is what I've tried:
.htaccess (doesn't work)
<IfModule mod_headers.c>
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With"
Header set Access-Control-Allow-Methods "GET, PUT, POST"
</FilesMatch>
</IfModule>
nginx (doesn't work)
add_header Access-Control-Allow-Headers "X-Requested-With";
add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
add_header Access-Control-Allow-Origin "*";
I am pulling my hair out trying to figure out why font awesome wont show its icons on my site which is on a different domain.
.htaccess files are apache only, it will never work for Nginx.
With nginx it should work if theses headers are added to the font HTTP response... but it seems you do not own the fonts and you take the fonts from another website. The CORS headers need to be set by this website, not yours. Check what are theses headers on the fonts, and check that your website is allowed to use the fonts from there (else you will have to download the fonts on your website and add the headers on an nginx location based on the font extension.
I guess you confuse CORS headers and CSP headers (**C**ontent **S**ecurity **P**olicy). Where you can give a list of allowed resources for your website.