15

I wrote a function that keeps returning an Access-Control-Allow-Origin error. This is actually fine for me; I don't want to fix this. I just want to catch it so I can read its message in my program.

All the code that causes the error to be thrown is within my try block, and my catch block displays the error's string message. However, when I run the code, no error is caught, and the error shows up in red in the console. How do I catch this error and store its message?

        try {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                if (this.status < 400 && this.status >= 300) {
                    console.log('this redirects to ' + this.getResponseHeader("Location"));
                } else {
                    console.log('doesn\'t redirect');
                }
            }

            xhr.open('HEAD', $scope.suggLink, true);
            xhr.send();
        } catch(e) {
            console.log('Caught it!');
            console.log(e.message);
        }

2 Answers 2

22

While browsers will log a more-detailed error message to the console, you can’t access that from your code. See https://bugs.chromium.org/p/chromium/issues/detail?id=118096#c5:

The details of errors of XHRs and Fetch API are not exposed to JavaScript for security reasons.

As far as the what specs actually require here, the Fetch spec is what defines the details of the “status message” to provide in case of an error — even if XHR is used instead of the Fetch API (the XHR spec references the Fetch spec). And for any network error or response blocked by the browser, the Fetch spec requires that the status message be “the empty byte sequence”:

A network error is a response whose status is always 0, status message is always the empty byte sequence, header list is always empty, body is always null, and trailer is always empty.

So all you can get back from any error you can catch is “TypeError: Failed to fetch” or such.

If you’re using XHR, all you have for handling an error is the onerror event handler:

xhr.onerror = function() { console.log("Error occurred but I dunno what exactly.")}
2
  • 2
    Sadly, while that lets me fire a console message, it does not let me prevent the default error message. In other words, I'm clarifying that not only are the details of errors of XHRs and Fetch API not exposed to JS, but we cannot prevent them from displaying, either. Super Lame.
    – Kyle Baker
    Commented Apr 13, 2018 at 8:21
  • Using jquery: $.getJSON(sURL, function (json) { console.log('json from web-service ->', json); }) .fail(function() { console.log("error - could not get json data from service"); });
    – Andre Nel
    Commented Mar 25, 2020 at 4:54
0

jquery version of above (sideshowbarker's) workaround for CORS error:

let sURL = 'https://www.mocky.io/v2/5185415ba171ea3a00704eed';
$.getJSON(sURL, function (json)
{
    console.log('json from web-service ->', json);
})
.fail(function()
{
    console.log("error - could not get json data from service");
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.