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.
Related
I made a webpage that should load a html files into a iframe. When you click something, it appears in . Although all of my files are html documents with html tags, they don't have extensions. So in the iframe, it renders as plain text. How do i configure Apache server setting so that the default file extension is set to ".html" when the file doesn't have any extension? Does it have anything to do with .htaccess file?
It seems like I can hide file extensions by doing some trick in that file, but I'm trying to do the opposite (adding an extension). How do I do this?
If you are using an old version of Apache:
DefaultType text/html
DefaultType Directive
MIME content-type that will be sent if the server cannot determine a type in any other way
For the current version:
Use the mime.types configuration file and the AddType to configure media type assignments via file extensions, or the ForceType directive to configure the media type for specific resources. Otherwise, the server will send the response without a Content-Type header field and the recipient may attempt to guess the media type.
So:
# force all files to be text/html:
<Location />
ForceType text/html
</Location>
How to make server to return manifest file with text/cache-manifest content type? By default, if I put it to the server and include into <html manifest="cache.manifest"> it is being loaded with type application/x-ms-manifest.
That's one of the reasons why the recommended extension for manifest files is now .appcache - Microsoft is already using .manifest for something else. To configure content types:
In IIS6 and below, add the MIME type mappings on the header tab of your virtual directory or web site properties (MS instructions).
In IIS7 and later, either go to MIME types in Features view or add a mimeMap entry under staticContent in your web.config like <mimeMap fileExtension=".appcache" mimeType="text/cache-manifest" />
you may include
AddType text/cache-manifest .appcache
in your .htaccess
or if you happen to use PHP you can send header information
header('Content-Type: text/cache-manifest');
Was having trouble caching an offline site on the iPad through GoDaddy hosting... Their mime type is incorrect for Safari support, so I simply made an cache.ASPX page:
<%#Page ContentType="text/cache-manifest" ResponseEncoding ="utf-8" %>
At the bottom of the page... Hope this helps someone!
You have to have a helicon file type .htaccess for it to work with IIS. Is can have an .htaccess file, just needs to be a # Helicon ISAPI_Rewrite configuration file
Version 3.1.0.82
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.
I have seen some articles about HTML5 Manifest, which say that we must add manifest file to .htaccess with following line:
AddType text/cache-manifest .manifest
However, there is no any explnation what is the purpose of adding?
Where should I place this .htaccess file ? in the same folder where the manifest file is? and finally how can i make sure that it is added to .htaccess successfully?
Even if i do not create any .htaccess file, i only add this to my html file
<html manifest="site.manifest">
I can see the popup bar in firefox, asking that the website is asking to store data. So isn't it working without this .htaccess?
I'll appriciate if anyone can explain. Thanks.
You don't "add a manifest file" to .htaccess with that line. That line just tells Apache that files with the suffix ".manifest" will be of type text/cache-manifest. Apache tells the client about the file type in the HTTP content-type header. The HTTP content-type header is required for the browser/client to understand how to interpret the contents of the file. Refer:
AddType Directive # httpd.apache.org
The cache manifest in HTML5 # en.wikipedia.org
The cache manifest syntax # w3.org
Offline Web Applications # w3.org
I have been trying to use Server Side Includes on my website to save time writing code and be able to change site wide elements quickly and easily.
However i cannot seem to get them to work, either locally or on the Server.
I have set them up as .html files (with only the code needed and no html or body tags) in a "ssi" folder and am calling them in the appropriate locations in my .shtml files with:
<!--#include virtual="/ssi/<filename>.html" -->
but still nothing. Any ideas?
Is it Apache? Perhaps includes are not even enabled.
http://httpd.apache.org/docs/2.2/howto/ssi.html
To permit SSI on your server, you must have the following directive either in your httpd.conf file, or in a .htaccess file:
Options +Includes
Have you enabled SSI on the Apache server?
You should have something like this in conf/http.conf:
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
This means that .shtml files are parsed for SSI commands (not .html) files. Then, you need to enable if fr your Virtual Host, or directory:
Options +Includes
It's possibly a path problem. Have you tried it without the leading "/" in front of "ssi"?