Modifying the HTTP headers client-side with JavaScript

Question

Is it possible to use JavaScript to dynamically change the HTTP Headers received when loading an image from an external source? I'm trying to control the caching of the image (Expires, Max-Age, etc...) client-side since I do not have access to the server.

Answer 1

I do not think Javascript can actually do that : the images are requested by the browser, and it's up to him to define HTTP-headers to issue.

One way to use some custom headers would be with some kind of Ajax-request, not passing by any <img> tag ; but you'd have to know what to do with the returned data... Don't think it would help much.

If you want your images to be kept in cache by the browser, you server has to send the right headers in the responses (like Etag, and/or Expires -- see mod_expires, for Apache, for instance)

If you want to be absolutly sure the browser will download a new image, and not use the version it has in cache, you should use a different URL each time.
This is often done using the timestamp as a parameter to the URL ; like example.com/image.jpg?123456789 (123456789 being, more or less, the current timestamp -- obviously less than more, but you get the idea : each second, the browser will see the URL has changed)

EDIT after the edit of the question :

The Expires header is generated by the server, and is one of the headers that come in the Response (it's not a header the client sends in the Request ; see List of HTTP headers).

So, you absolutly have no control over it from the client-side : it's the server that must be configured to do the work, here...

If you want more answers : what are you trying to do exactly ? Why ?

Answer 2

Caching directives are in the server's responsibility. You can't manipulate them on the client side.

Maybe it's an option for you to install a proxy server, e.g. if you are aiming at company employees?

Answer 3

As the others have said, no, it is not possibly to manipulate http headers and caching directives from the server in client code.

What is possible

What you do have the ability to do is ensure you get a new file. This can be done by appending a unique string to the URL of the request as a query string parameter.

e.g. if you wanted to ensure you got a new file each hour

<script type="text/javascript">

var d = new Date();
url += ("?" +d.getYear() + "_" + d.getDay() + "_" + d.getHours());

</script>

What this does is add a value containing the year, day and hour to the url, so it will be unique for each hour, hence ensuring a new file request. (Not tested!)

Obviously this can be made much more generic and fine tuned, but hopefully you'll get the idea.

What is impossible

What you can't do is ensure you will not retrieve a new version from the server.