I have a Netlify CDN pulling files via my GitHub, and everything works perfectly fine it seems, except loading the fonts. I'm rather new to CDNs but have been researching and learning a lot.
But... I've spent 4 hours researching how to enable this, and the only thing I can find in their documentation or anyone else with similar problems, is that I need to create a _header file in the root directory, but they don't specify anything to do with the fonts. They just tell me this example code.
Site link:
https://www.netlify.com/docs/headers-and-basic-auth/
Example Header:
## A path:
/templates/index.html
# Headers for that path:
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
/templates/index2.html
X-Frame-Options: SAMEORIGIN
Does anyone have any experience with this? I'm about to go find a new CDN, but not sure who else is reliable.
Netlify allows for you to setup Headers in your pages using a structured configuration in the netlify.toml file.
To add a header for the woff content type you need a header equivalent of:
/*.woff
Access-Control-Allow-Origin: *
Content-Type: application/font-woff
Using the Netlify Tool to test valid headers, your settings in the config would be:
netlify.toml
[[headers]]
for = "/*.woff"
[headers.values]
Access-Control-Allow-Origin = "*"
Content-Type = "application/font-woff"
The netlify.toml file exists at the root of the site on Netlify.
The paths need to be valid also and the above is just an example.
The file _headers in the root directory can be used for configuration of headers according to the documentation https://www.netlify.com/docs/headers-and-basic-auth/.
The following examples demonstrates how all ttf and woff fonts in the directory /assets/fonts/ and its sub directories can be given access from any origin.
# Custom Netlify Headers
# https://www.netlify.com/docs/headers-and-basic-auth/
/assets/fonts/*.woff
Access-Control-Allow-Origin: *
Content-Type: application/font-woff
/assets/fonts/*.ttf
Access-Control-Allow-Origin: *
Content-Type: application/font-ttf
Related
I have a bunch of html files in my web-page that do not end with .html. This never gave me any trouble, all browsers always treated the files correctly.
Now that I've migrated to SSL (https instead of http), those files are not recognized as html anymore by browsers, instead as app/octet-stream, and ask me what I want to do with them when I try to open.
How can I fix this on the server side? I tried fiddling with the .htaccess file, writing
RedirectMatch permanent /photo/birdindexframes/([^\.]*)$ /photo/birdindexframes/$1.html
and moving each to <file.html>, but this is not working.
Also not working:
<FilesMatch "^[^.]+$">
ForceType text/html
</FilesMatch>
<Files "^[^.]+$">
ForceType text/html
</Files>
If necessary, I have access to the system administrator.
i'm trying to access a distant website from my local website in wampserver.
I found that i should activate the CORS using :
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin: *
Header set Access-Control-Allow-Credentials: true
</IfModule>
but should this code be added in the source website (the one i created in local) or in the destination website (the one i'm trying to access) ?
thnx a lot in advance.
The site hosting the HTML document in which the JavaScript runs has to be given permission by the other site in order to read data from it (or to send preflighted requests to it).
I have this line in a css file of my project:
#import url(http://reset5.googlecode.com/hg/reset.min.css);
That results in an error when I load the page when it's on my webserver
XMLHttpRequest cannot load http://reset5.googlecode.com/hg/reset.min.css. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mydomain.ca' is therefore not allowed access. The response had HTTP status code 403.
I've read that the server hosting the .css file has to add an Access-Control-Allow-Origin * thing on their web server but I'm not owning this so...
(I've also tried to add this
location ~* \.(eot|ttf|woff|css)$ {
add_header Access-Control-Allow-Origin *;
}
in my nginx config and it didn't help, but I don't think I have to change anything on my web server, do I?)
This is a common error when the external file is not allowed to be accessed in some cases.
Instead of linking to the Google file, it would be better to host the file yourself, and link to it on your own server.
Download the file, and save in the css folder (or wherever you like), and then link to it using "link rel".
This will solve your problem.
I am using the YUI compressor plugin to compress and gzip JS and CSS files within my Java EE application.
However, I am not clear on how to reference them within my HTML/JSP files.
If I simply use the .gzip reference, the browser obviously complains saying -
Resource interpreted as Script but transferred with MIME type application/x-gzip
The current reference looks like this (which throws the above error):
<script type="text/javascript" src="/scripts/home.js.gz"></script>
What you are seeing is a warning in your browser, it will show this anytime you interpret data differently than the returned content type.
What you are really trying to do is this:
Content-Type: text/javascript
Content-Encoding: gzip
This will remove the browser error, but also make the browser recognize that this file must be uncompressed before use.
You reference them with the normal .js and .css extensions and check if gzip is working by checking the response headers on the CSS and JS files by inspecting via firebug or developer tools.
Gzipping is typically done at the web server level.
If you're using tomcat you can open the conf/server.xml of your Tomcat installation and add the following to the Connector definition.
<Connector port="8080" protocol="HTTP/1.1" redirectPort="8443" connectionTimeout="20000"
compressableMimeType="text/html,text/xml,text/css,text/javascript,text/plain,application/javascript,application/json"
compression="2048"/>
For Apache look up mod_gzip or mod_deflate
This goes in your root .htaccess file but if you have access to httpd.conf that is better.
<ifModule mod_deflate.c>
<filesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
Although you can configure the tomcat to do all gzip for you, I recommend to manually zip your static resources like js and css files and save them on your server as css.gz or js.gz, then you can use a servlet to send these static and pre compressed files to client, when a request came in.
Please see https://gist.github.com/suprememoocow/1570654 for the servlet implementation.
If your server has a built in mechanism for cahing the gzip files, then you can go with it. As far as I find the tomcat (7) does not have this feature yet.
I've been reading about Access-Control-Allow-Origin because it seems effective at allowing cross domain requests since I have access to the external site. My question ism how do I use Access-Control-Allow-Origin to allow cross domain requests. I tried this (don't laugh) (by the way all I want is for a single number, 1 or 0 to be returned)
<html>
<head>
Access-Control-Allow-Origin: *
</head>
<body>
1
</body>
</html>
Am I close? Thanks for your help. If there is an easier way to do a simple cross-domain request let me know.
There are 3 ways to allow cross domain origin (excluding jsonp):
Set the header in the page directly using a templating language like PHP. Keep in mind there can be no HTML before your header or it will fail.
Modify the server configuration file (apache.conf) and add this line. Note that "*" represents allow all. Some systems might also need the credential set. In general allow all access is a security risk and should be avoided:
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials true
To allow multiple domains on Apache web servers add the following to your config file
SetEnvIf Origin "http(s)?://(www\.)?(example.org|example.com)$" AccessControlAllowOrigin=$0$1
Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
Header set Access-Control-Allow-Credentials true
For development use only hack your browser and allow unlimited CORS using the Chrome Allow-Control-Allow-Origin extension
Disable CORS in Chrome: Quit Chrome completely. Open a terminal and execute the following. Just be cautious you are disabling web security:
open -a Google\ Chrome --args --disable-web-security --user-data-dir
That is an HTTP header. You would configure your webserver or webapp to send this header ideally. Perhaps in htaccess or PHP.
Alternatively you might be able to use
<head>...<meta http-equiv="Access-Control-Allow-Origin" content="*">...</head>
I do not know if that would work. Not all HTTP headers can be configured directly in the HTML.
This works as an alternative to many HTTP headers, but see #EricLaw's comment below. This particular header is different.
Caveat
This answer is strictly about how to set headers. I do not know anything about allowing cross domain requests.
About HTTP Headers
Every request and response has headers. The browser sends this to the webserver
GET /index.htm HTTP/1.1
Then the headers
Host: www.example.com
User-Agent: (Browser/OS name and version information)
.. Additional headers indicating supported compression types and content types and other info
Then the server sends a response
Content-type: text/html
Content-length: (number of bytes in file (optional))
Date: (server clock)
Server: (Webserver name and version information)
Additional headers can be configured for example Cache-Control, it all depends on your language (PHP, CGI, Java, htaccess) and webserver (Apache, etc).
<?php header("Access-Control-Allow-Origin: http://example.com"); ?>
This command disables only first console warning info
console
Result:
console result
If you are using npm and want to load some files/folders allowing cross origin resource sharing(CORS) try the following,
install the http-server:
npm install http-server -g
Go to your files/folders folder and run the command below to make your files/folders available at http://127.0.0.1:8080 . This a good choice when you want to keep the files in a safe place and control who can request inferences to it. The -c1 parameter is added to disable caching, and
the --cors flag enables cross origin resource sharing(CORS) allowing the hosted files to be used by the client side JavaScript for a given domain.
http-server -c1 --cors .
It worked for me in WSL-ubuntu terminal on windows 10. It should work with npm CLI on any OS.
Thank you.
If you use Java and spring MVC you just need to add the following annotation to your method returning your page :
#CrossOrigin(origins = "*")
"*" is to allow your page to be accessible from anywhere.
See https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin for more details about that.