4

Is it possible to get only response headers from XMLHttpRequest without downloading file data?

bluish
  • 26,356
  • 27
  • 122
  • 180
Anton
  • 2,217
  • 3
  • 21
  • 34
  • 2
    This answer helped me with my problem 4 years ago and it seems that there is still no client-side-only solution. If you have one, please, share it and I'll accept your answer. – Anton Jan 31 '18 at 11:03

3 Answers3

7

If the server you are making the request to supports the method, it sounds like what you want is to make an HTTP HEAD request. See the HTTP spec.

For example compare the output from curl -v -X GET https://github.com and curl -v -X HEAD https://github.com.

Also see HTTP HEAD Request in Javascript/Ajax?

Community
  • 1
  • 1
Stephen Ierodiaconou
  • 779
  • 1
  • 7
  • 21
  • 1
    Down-voted for answering a client-side question with a server-side answer. – John Jan 26 '18 at 20:10
  • 1
    I agree that it would have helped here to also show how to get the headers from the XHR response object, but for the OPs question, I believe the answer is fundamentally correct. The HTTP operation required here is a HEAD request. However I may have misunderstood the question. – Stephen Ierodiaconou Feb 13 '18 at 15:29
  • 2
    @John - Not sure why you say this is a server-side solution, as the fix is to issue a HEAD request as per your answer, below. Stephan is just demonstrating that with `curl` instead of browser code. But curl is as much a client as a browser. – broofa Feb 27 '19 at 13:55
1

Using JavaScript (as specified in the question) simply use a head request via AJAX:

var xhr = new XMLHttpRequest();
var method = 'head';
var url = 'https://www.example.com/';
xhr.open(method,url,true);
xhr.send(null);

xhr.onreadystatechange = function()
{
 if (xhr.readyState === 4)
 {
  console.log(xhr.getAllResponseHeaders())
 }
}
John
  • 1
  • 13
  • 98
  • 177
  • Surely this causes the browser to also fetch the whole body of the HTTP response from the server. This does not answer the OPs question. It simply shows them how to get the header data from the response object in JS. The original question asked to get the response headers without fetching the content – Stephen Ierodiaconou Feb 13 '18 at 15:26
  • sorry not sure what you mean, are you saying the correct answer is to use a HTTP POST as per your answer? Or that the reader should understand that the HTTP `method` in your code above should be changed to `head` if they want to indicate to the server that they do not also want the full response body? In your example just POSTing will still return a body (assuming the server creates one for the given endpoint). The semantics of a HEAD request however indicate to the server to not respond with a body (assuming the endpoint supports HEAD). Happy to remove the downvote if explained. – Stephen Ierodiaconou Feb 13 '18 at 16:58
  • I missed the head being set as post. >__> – John Feb 13 '18 at 20:32
  • try to add some description to your answer – Muhammad Omer Aslam Feb 13 '18 at 21:44
  • @StephenIerodiaconou is wrong https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/getAllResponseHeaders, John is right – Brian Ogden Jun 14 '23 at 05:43
1

Firstly, the answer from John fixes this issue but it got downvoted because it didn't have enough of an explanation.

So here is the fix with an explanation as well as an extra bit that you can add as well.

Client side solution is as follows (I am using the status code as the example):

function checkStatus(url) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest(); 
    request.open('HEAD', url, true)

    request.onreadystatechange = () => {
      if (request.readyState >= 2) {
        resolve(request.status)
        request.abort()
      }
    }

    request.onerror = (e) => {
      reject(e)
    }

    request.send()
  })
}

The reason why this works is for two reasons.

Firstly we are passing HEAD in as the method instead of GET this should be enough on its own, but if you want to do more, you can move onto the second reason.

The second reason this works is because of the readyState states.

0 = UNSENT
1 = OPENED
2 = HEADERS_RECEIVED
3 = LOADING
4 = DONE

At state 2 the headers are ready to be viewed. This means you can then return whatever you need and/or abort the rest of the request preventing any further data being downloaded.

Worth noting you can also do this with request.onprogress at stage 3.

See https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState and https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods for more details.

Will Mayger
  • 11
  • 1