How to get only response headers from XMLHttpRequest

Question

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

Solution 1

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?

Solution 2

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.

Comments

[Anton]

Thanks! That's exactly what i need.

[John]

Down-voted for answering a client-side question with a server-side answer. 😒

[Stephen Ierodiaconou]

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]

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]

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.

[John]

I missed the head being set as post. >__>

[Muhammad Omer Aslam]

try to add some description to your answer

[broofa]

@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.

[Ken Ingram]

Nope. I didn't get the headers in the response.