Get current page http status from javascript

Question

Is there any way to get the http status of the current web page from javascript?

Spent some time searching on the web, but no luck at all... Seems like it's not possible, but wanted to check with Stack Overflow for maybe some fancy workaround.

(Providing it from the server as part of the response body is not acceptable, the status is supposed to be only available via the http header)

Answer 1

This is not in any way possible, sorry.

Answer 2

Yes You can

Simply request the same page, i.e. URI, using the XMLHttpRequest. Suppose that your page on /stop.php in stop.php you may do something like:

<script>
function xhrRequest(){            
            console.log(this.status);
            // Do some logic here. 
        }
function getReq(url){
            var oReq = new XMLHttpRequest();
            oReq.addEventListener("load", xhrRequest);
            oReq.open("GET", url);
            oReq.send();
        }
getReq("/stop.php");
</script>

Checkout this DEMO

Note:

You have to note that, it is a copy of the page not the page itself. I, already, have used this solution on a page in which the server may generate Forbidden HTTP status code when the request is come from unauthorized IP address, so the condition here is very simple and there is no much difference between the original and the copy page that you have simulate its visit.

Answer 3

As a one-liner:

fetch(location.href).then(response => console.log(response.status));

This is asynchronous, if you need a synchronous solution use XMLHttpRequest (as in the other answer) together with async: false or use async/await which feels synchronous, but is still asynchronous under the hood.

Attention: There is the potential risk that the status code of this new request isn't the same as the status code of the original page request, for several reasons, like timouts, authentication and so on.

Alternatively

An approach without an extra call would require to include the status code in the page on the server side, then read it on the client side via JavaScript, like so:

Java + Thymeleaf + meta tag:

<meta name="statuscode" th:content="${#response.status}">

Java + Thymeleaf + JavaScript variable:

<script th:inline="javascript">
  const statusCode = [[${#response.status}]];
</script>

PHP + meta tag (unverified):

<meta name="statuscode" content="<?php echo http_response_code() ?>">

Answer 4

console.log(window.performance.getEntries()[0].responseStatus)

Answer 5

This is (experimental but) possible in chrome by leveraging responseStatus from Performance API. We look for the navigation entryType which should provide the page http status.

const navigationData = window.performance.getEntries().find(e => e.entryType === "navigation")
navigationData.responseStatus // 200

Alternative:

const navigationData = window.performance.getEntriesByType('navigation')[0];
navigationData.responseStatus // 200

Answer 6

var xhr = new XMLHttpRequest();
xhr.open('GET', window.location.href, false);
xhr.send(null);
console.log(xhr.status);

Answer 7

It is not beautiful, but you can use:

t = jQuery.get(location.href)
    .success(function () { console.log(t.status) })
    .error(function()    { console.log(t.status) });

That When Eric says, this solution will make a new request from the same paga, and not show status of current request.