title: Varnish Cache and headers
body: <p>I am trying to cache a certain part of my web app. </p>
  
  <p>I have an endpoint at <code>http://website.dev/pictures/:id</code> that returns PHP generated pictures. Sometimes, the endpoint can come with a width and a height in query string to define picture dimension: <code>http://website.dev/pictures/:id?w=100&amp;h=100</code>. </p>
  
  <p>So I would like to cache those requests for a very long time. </p>
  
  <p>I tried a very simple VCL as I'm new to it and I don't want to make complicated things:</p>
  
  <pre><code>vcl 4.0;
  
  
  backend default {
      .host = "127.0.0.1";
      .port = "80";
  }
  
  sub vcl_recv {
      if (req.url ~ "^/api/pictures" &amp;&amp; req.method ~ "GET") {
          # I heard that it was better to unset the cookies here to allow cache
          unset req.http.cookie;
          return (hash);
      }
  
      return (pass);
  }
  
  sub vcl_deliver {
      if (obj.hits &gt; 0) {
          set resp.http.X-Cache = "HIT";
      } else {
          set resp.http.X-Cache = "MISS";
      }
  }
  </code></pre>
  
  <p>But now, I get all MISS on my requests. I tried to modify the responses coming from my backend in order to have appropriate cache-control and expires headers:</p>
  
  <pre><code>Response Headers:
  Accept-Ranges:bytes
  Age:0
  Cache-Control:max-age=10000, private
  Connection:keep-alive
  Content-Length:96552
  Content-Type:image/jpeg
  Date:Sun, 30 Jul 2017 16:41:58 GMT
  Expires:Fri, 01 Jan 2100 00:00:00 GMT
  Server:nginx/1.10.3 (Ubuntu)
  Via:1.1 varnish (Varnish/5.1)
  X-Cache:MISS
  X-RateLimit-Limit:60
  X-RateLimit-Remaining:57
  X-Varnish:32772
  
  Request Headers
  view source
  Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
  Accept-Encoding:gzip, deflate
  Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4,es;q=0.2
  Cache-Control:max-age=0
  Connection:keep-alive
  Cookie:_ga=xxxxxxxxxxxxx
  Host:website.dev:6081
  Upgrade-Insecure-Requests:1
  User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
  </code></pre>
  
  <p><strong>Where am I wrong here? How could I make sure the requests on such endpoints and only are cached by Varnish for a very long time?</strong></p>