CODEWITHSUNDEEP
javascripthttp-headersfetch-api
Yin Cognyto
Yin Cognyto

Reputation: 1146

How to fetch (using Fetch API) only headers in Javascript, not the whole content?

Here I have this sample fiddle, where I try to get only the content-type header from a large image, using both XMLHttpRequest() and fetch() in Javascript. If you run the fiddle with Chrome's Developer Tools / Network tab (or similar tools in other browsers) open, you'll see that while the XMLHttpRequest() method gets only the 600 B where the headers are located, the fetch() method gets the whole 7.8 MB image, despite my code only needing the content-type headers.

How can I get just those few bytes needed for the headers (instead of the whole content) using the Fetch APi's fetch()?

Note: I am interested in this, because apparently, if I try to get the headers of all the links of a regular Google page, the XMLHttpRequest() method logs me out and sometimes changes my language as well, while the fetch() method does not. I assume this is because the former sends the credentials / cookies / etc., while the latter is more 'restrictive' by default...

Upvotes: 29

Views: 22847

Answers (1)

KevBot
KevBot

Reputation: 18908

You need to specify the method type of HEAD:

fetch(url, {method: 'HEAD'})

See updated fiddle

Upvotes: 63

Related Questions