title: API Gateway Caching vs CloudFront
body: <p>I'm a bit confused by how API Gateway and CloudFront work together. Ultimately, I want to be able to have a custom header and value be considered part of my cache key. I know this can be done by whitelisting (if I'm using CloudFront).</p>
  
  <p>So when I make the following request:</p>
  
  <pre><code>GET /pagesRead/4
  Some-Header: fizz
  </code></pre>
  
  <p>This returns, for instance, <strong>'29 pages'</strong></p>
  
  <p>Then there's a post that updates <strong>id 4 to '45 pages'</strong></p>
  
  <p>If I make this request</p>
  
  <pre><code>GET /pagesRead/4
  Some-Header: buzz
  </code></pre>
  
  <p>It will now return <strong>'45 pages'</strong></p>
  
  <p>But I'm using API Gateway, which obviously has it's own CloudFront behind the scenes. Is there a way I can configure API Gateway to use its 'behind-the-scenes' CloudFront to whitelist my custom header? Does this even need to be done?</p>
  
  <p>According to this documentation: <a href="https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-caching.html" rel="noreferrer">AWS-API-Gatway</a>, It seems like I can just enable <strong>API caching in API Gateway</strong>, and it will consider my headers as part of the cache key.</p>
  
  <p>Am I understanding this correctly? If all I want is for my headers to be a part of the cache key, what's the difference between <strong>'Enabling API Caching'</strong> in <strong>API Gateway and adding a CloudFront</strong> instance on top of API Gateway and white-listing in CloudFront?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I've added a header like this in API Gateway:
  <a href="https://i.stack.imgur.com/ULODb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ULODb.png" alt="enter image description here"></a></p>
  
  <p>But on GET, I am getting stale data from the cache.</p>
  
  <pre><code>GET /pagesRead/4 test-header: buzz
  </code></pre>