I'm trying to disable caching of HTML templates in my angular app. It seems the easiest way to achieve this is disabling via Apache. I placed this .htaccess file in my web root:
<FilesMatch "\.(html|htm)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Note "CACHING IS DISABLED ON LOCALHOST"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</IfModule>
</FilesMatch>
and restarted the server:
sudo service apache2 restart
but re-loading my browser with a soft refresh still shows the old, cached files.
Related
I have added Cache Headers but Its doesnt remove my Browser Cache. Can anyone please help how to do that??
<VirtualHost *:443>
ServerName <ip-address>
ServerAdmin webmaster#localhost
DocumentRoot /var/www/html/build
Include conf/headers.conf
SSLEngine on
SSLCertificateFile /etc/httpd/sites-available/cert.crt
SSLCertificateKeyFile /etc/httpd/sites-available/ssl.key
<Directory /var/www/html/build/>
Options +FollowSymlinks
AllowOverride All
Require all granted
</Directory>
There are many different browsers, there is no 100% reliable way for you to control what a clients browser stores in it cache. You can set headers on your servers response which tell a web browser that it should dump old files from it's cache and request new ones after a predefined period but this is only a recommendation, the browser may choose to ignore it, after all you do not control the browser software a client is using.
Set browser cache control headers in your Apache config file something like this...
# here we are telling the browser to request new files for specific images after 604800 seconds or 7 days, i.e. dump the cache if files are more than 7 days old
<FilesMatch "bird.jpg|dog.jpg|noob.jpg|fish.jpg|rabbit.jpg|cow.jpg">
Header set Cache-Control "max-age=604800, public, must-revalidate"
</FilesMatch>
# here we are telling the browser to request new files for specific file types after 86400 seconds or 1 day
<FilesMatch ".(css|js|ttf|ico)$">
Header set Cache-Control "max-age=86400, public, must-revalidate"
</FilesMatch>
If you are just looking for a quick way to clear the cache on google chrome on your own pc you can install a browser plugin to to that such as https://chrome.google.com/webstore/detail/no-cache-refresh/njacldedajpdoofkhpfckdkgcahjlfkj
I am trying to develop a project for a company. This company has an API that only allows requests from two sources: Their own host, and xyz.localhost.
At first, I developed the project with jQuery only (loaded in via CDN). With an Apache VirtualHost setup, this worked -- I could access the API.
Now, I want to refactor the project and use React with it. I used create-react-app to create a react directory.
The problem is: I can get create-react-app to use xyz.localhost, but I am still getting the CORS error message in Chrome:
Access to fetch at 'http://api.thatcompany.com/search?search=a'
from origin 'http://xyz.localhost:3000' has been blocked by CORS policy
Has anybody any ideas how to make it work?
Thank you in advance.
/private/etc/apache2/httpd.conf:
# Virtual hosts
#Include /private/etc/apache2/extra/httpd-vhosts.conf
Include /private/etc/apache2/vhosts/*.conf
/private/etc/hosts:
127.0.0.1 xyz.localhost
255.255.255.255 broadcasthost
::1 xyz.localhost
/private/etc/apache2/vhosts/xyz.localhost.conf:
<VirtualHost *:80>
DocumentRoot "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public"
ServerName xyz.localhost
<Directory "/Users/MYUSERNAME/dev_projects/MY-REACT-APP/public">
AllowOverride All
Require all granted
</Directory>
<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
</VirtualHost>
My create-react-app start script:
"scripts": { "start": "HOST=xyz.localhost react-scripts start" }
I found a workaround.
I simply pointed the VirtualHost to the build folder of Create React App, this worked and served me the static files.
Editing the code was pretty tiresome, as I had to run npm run Build after every update.
Luckily, I found the npm watch module. With that, create react App would rebuild on every save. I still have to wait a second between save and refreshing the browser, and it’s absolutely not comparable to using create react app on its own, but it was a good enough solution!
Google give the following example of setting up an Apache server to serve a GWT app.
What is the equivalent entries to an AppEngine (GAE) app.yaml file?
<Files *.nocache.*>
ExpiresActive on
ExpiresDefault "now"
Header merge Cache-Control "public, max-age=0, must-revalidate"
</Files>
<Files *.cache.*>
ExpiresActive on
ExpiresDefault "now plus 1 year"
</Files>
see https://developers.google.com/appengine/docs/go/config/appconfig#Static_Cache_Expiration
The expiration time will be sent in the Cache-Control and Expires HTTP
response headers, and therefore, the files are likely to be cached by
the user's browser, as well as intermediate caching proxy servers such
as Internet Service Providers.
I'm trying to change the cache-control & Expires headers coming through an apache reverse_proxy. I can't change the origin server configs or code ATM.
ExpiresActive On
Header unset Etag
Header unset Cache-Control
Header unset Expires
<LocationMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</LocationMatch>
.. and
<LocationMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresActive On
Header unset Etag
Header unset Cache-Control
Header unset Expires
Header set Cache-Control "public"
Header set Cache-Control "max-age=290304000, public"
</LocationMatch>
are not doing it & when restarting apache2 there are no complaints about the config.
Testing by using "curl -I ...image.jpg"
Can maybe dodge the problem by setting multiple locations having different headers on each.
ex.
<Location /resources/>
Header unset Etag
Header set Cache-Control "max-age=290304000, public"
Header unset Expires
ProxyPass {ajp|http}://host:port/resources/
ProxyPassReverse {ajp|http}://host:port/resources/
</Location>
<Location //>
Header add "Instance_1"
ProxyPass {ajp|http}://host:port/
ProxyPassReverse {ajp|http}://host:port/
</Location>
I am a mediocre apache2 configuration specialist so I am looking to the apache GODS to school me on a specific header that is causing some browsers to not cache cookies, which I need for an OAuth implementation I am doing.
When I run the command:
lwp-request -e -d http://foobar.com
my site foobar.com returns the following headers:
Cache-Control: no-cache="set-cookie"
Connection: Close
Date: Thu, 13 Jan 2011 06:18:00 GMT
Vary: Accept-Encoding
Content-Language: en-US
Content-Type: text/html;charset=UTF-8
Client-Date: Thu, 13 Jan 2011 06:18:01 GMT
Client-Peer: 50.16.212.144:80
Client-Response-Num: 1
Client-Transfer-Encoding: chunked
Link: </images/ic_fav_alpha_32.png>; /="/"; rel="shortcut icon"
Set-Cookie: JSESSIONID=C5055D83F9B5A52C062D8A9F616D62AB; Path=/
Set-Cookie: AWSELB=3505DFB9122FAFC80483E17CBEB5E23D24546B00A71218A5BAE3B79F14317437BEAEDA7FECDE95AFFF6463C9769D0D0E3214FD9D67BAA906438E5D0FA925CD323D7E860C2A;MAX-AGE=600
Title: Foobar Home
X-Meta-Description: Foobar Home Page
X-Meta-Generator: Foobar
X-Meta-Google-Site-Verification: u9YkTj5gr6aeYBst1Aac-B_5cCvJe_Ataauqep_EwEE
X-Meta-Googlebot: index,follow
X-Meta-Refresh: 20
X-Meta-Robots: index,follow
So I attempt to unset the Cache-Control header in my site config for apache2 because I think this header is causing some browsers to not accept cookies. I want them to accept my cookies!
<VirtualHost *:80>
ServerName www.foobar.com
ServerAlias foobar.com
ProxyPass / ajp://localhost:8009/
ProxyPassReverse / http://localhost:8080/
ProxyPreserveHost On
# alert, emerg.
LogLevel warn
ErrorLog /var/log/apache2/error.log
CustomLog /var/log/apache2/access.log combined
ServerSignature On
Header unset Cache-Control
Header append Cache-Control "public"
</VirtualHost>
And now I would expect the no-cache header to disappear and to become "public" for foobar.com, but that does occur. This is the Cache-Control headers after restarting apache2:
Cache-Control: public
Cache-Control: no-cache="set-cookie"
This is not my expectation, I thought unset would unset all Headers of a specific type!
Note. This is an apache http server that is acting as an ajp proxy in front of a tomcat server on localhost:8080. I am expecting that should not matter.
Any ideas how to get rid of this pesky header?
THANKS!
Try to put the unset header under location:
<Location "/">
Header unset Cache-Control
</Location>