title: Why is it not possible to access the Content-Length response header even when I can access the actual contents of the file? (for a CORS request)
body: <p>In JavaScript, the Fetch API's <a href="https://stackoverflow.com/questions/43344819/reading-response-headers-with-fetch-api">access to certain headers is restricted</a> for security reasons during a CORS request.</p>
  
  <p>We can see the actual headers of a resource using <code>curl</code> in the terminal:</p>
  
  <pre><code>curl -I https://i.imgur.com/z4d4kWk.jpg
  </code></pre>
  
  <p>And here's the result:</p>
  
  <pre><code>HTTP/1.1 200 OK
  Last-Modified: Thu, 02 Feb 2017 11:15:53 GMT
  ETag: "18c50e1bbe972bdf9c7d9b8f6f019959"
  x-amz-storage-class: STANDARD_IA
  Content-Type: image/jpeg
  cache-control: public, max-age=31536000
  Content-Length: 146515
  Accept-Ranges: bytes
  Date: Sat, 14 Jul 2018 01:34:10 GMT
  Age: 446795
  Connection: keep-alive
  X-Served-By: cache-iad2134-IAD, cache-syd18935-SYD
  X-Cache: HIT, HIT
  X-Cache-Hits: 1, 1
  X-Timer: S1531532051.675972,VS0,VE2
  Access-Control-Allow-Methods: GET, OPTIONS
  Access-Control-Allow-Origin: *
  Server: cat factory 1.0
  </code></pre>
  
  <p>Here's the equivalent request using <code>fetch</code>:</p>
  
  <pre><code>await fetch("https://i.imgur.com/z4d4kWk.jpg", { method: 'HEAD' }).then(r =&gt; [...r.headers.entries()].map(l =&gt; l.join(": ")).join("\n"))
  </code></pre>
  
  <p>And here's the result:</p>
  
  <pre><code>cache-control: public, max-age=31536000
  content-type: image/jpeg
  last-modified: Thu, 02 Feb 2017 11:15:53 GMT
  </code></pre>
  
  <p>But imgur allows other origins to access that resource (see <code>Access-Control-Allow-Origin: *</code> in <code>curl</code> output above), and so we can actually get the contents of the file:</p>
  
  <pre><code>await fetch("https://i.imgur.com/z4d4kWk.jpg").then(r =&gt; r.arrayBuffer())
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/9RvJd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9RvJd.png" alt="CORS response"></a></p>
  
  <p>So we can get the actual contents of the file, and yet we can't get the headers?</p>
  
  <p>At first I thought it was because we were making a <code>HEAD</code> request and imgur specifies <code>Access-Control-Allow-Methods: GET, OPTIONS</code>, but I tried using a <code>GET</code> request and still got the same limited set of headers:</p>
  
  <pre><code>await fetch("https://i.imgur.com/z4d4kWk.jpg").then(r =&gt; [...r.headers.entries()].map(l =&gt; l.join(": ")).join("\n"))
  </code></pre>
  
  <p>Any idea why we're unable to see the headers even when we have full access to the content itself?</p>