Get rid of a 401 (unauthorized) ajax error in browser console

Question

I'm calling an api through javascript using a jQuery.ajax call. The api respond with 401 if the user is not authenticated and I want to ignore this error only for this call.

I've tried all the callback options described in the jQuery options but the error still pops out in the browser console (both in Firefox and Chrome).

Here is a sample code which trigger the error:

$.ajax({
    type: 'GET',
    url: '/url-with-auth',
    dataType: 'json',
    statusCode: {
        401: function (error) {
            // simply ignore this error
            console.log(error);
        }
    },
    complete: logall,
    error: function () {
        // simply ignore this error
        console.log(error);
    },
    async: false
}).fail(function () {
        // ignore the error and do nothing else
        console.log("$.get failed!");
    });

This also has the side effect of requesting again the user credentials on a staging machine which is protected by an .htaccess file since the browser thinks that the user is not authenticated, so in following requests the user needs to reenter his http credentials.

Is there any way to completely ignore this error?

Edit

Currently I have an HTML template which is entirely cached application side and I want to keep this behavior for performance reasons. The only part which changes in the layout is the login informations for the current user, so I'm rendering the (cached) page with the default markup for not logged in users and then using jQuery I replace the relevant elements of the markup with the login informations returned by an ajax call. So if the user is not logged and the ajax endpoint return 401 I don't need anything, the markup should remain the same.

Everything is working at this moment, the only ugly thing is that I have that 401 javascript error in the console and I'd like to get rid of it.

Here is a screenshot of the message I'm talking about:

console error

you might look at http://stackoverflow.com/questions/10267683/jquery-ajax-handle-401-unauthorized — Rachel Gallen, Jan 15 '13 at 13:10
@RachelGallen already did that and tried all the suggestion there, the handler is executed, but the error is still shown. I'd like to avoid it completely because in this case the script is intended to add a dom element only when the user is logged and if he isn't I want to simply ignore the call. — Fabio, Jan 15 '13 at 13:14
Can you provide more specifics on the behavior you are expecting. For instance, when you say "ignore", what do you want to happen? — Matt Ray, Jan 15 '13 at 14:10
why can't you set 401 error not to log to console in `statuscode`? Seems like you say that is the only problem. Can also have server send a special header for the non authorized users — charlietfl, Jan 15 '13 at 15:52
@charlietfl The console.log is there only to see if the callback is executed the error I'm talking about is another, I'll attach a screenshot. — Fabio, Jan 16 '13 at 14:52
any update on this? I get a 403 when making a CORS request to cloudfront when the file doesn't exist, would like to suppress this error output in the console as it is not an actual error and handled appropriately. — darnmason, Feb 20 '13 at 15:58
@masond No, I changed my implementation since I wasn't able to get rid of that. — Fabio, Feb 21 '13 at 10:41

score 4 · Answer 1 · answered Mar 14 '13 at 18:58

I also ran into this issue and wanted to surpress the exception in the JavaScript console for HTTP 401 and 404 etc errors. I found this question and didn't see why the error() and statusCode() handlers didn't quiet the exception so i did my own digging into it.

As far as i can tell it turns out that this is an issue with the native ajax XMLHttpRequest Object in the browser, not with jQuery. To prove this i used the following test code:

function xhrTest(index) {
    var ajaxObjects = [
        $.ajaxSettings.xhr(), // what jquery returns
        new XMLHttpRequest()  // the native one in the browser
    ];
    var ajax = ajaxObjects[index];
    ajax.onreadystatechange = function() {console.log("xhrTest: state: " + ajax.readyState)};
    var errorHandler = function() {console.log("xhrTest: error");};
    ajax.onerror = errorHandler;
    ajax.onabort = errorHandler;
    ajax.open("GET", "/fileThatDoesNotExist", true);
    ajax.send();    
}

Note that when calling this (i did it from the JavaScript console) with either xhrTest(0) or xhrTest(1), which bypasses jQuery, that the results are the same:

same results whether jQuery is used or not

score -2 · Answer 2 · answered Jan 15 '13 at 17:24

-2

Can you add a hidden field onto the page (i'm guessing its dynamically generated) like:

<input type="hidden" name="isLoggedIn" value="true" (or false) />

Then in you javascript, place

if ($('input[name=isLoggedIn"]').val() == "true")
{
     //your ajax call here
}

answered Jan 15 '13 at 17:24

allanx2000

694
3
9
21

Quite frankly, I don't think most users look at the Console. Only reason I use the Console is for development or if a site is acting weird – allanx2000 Jan 15 '13 at 17:27
I know how to write conditional code ;-) Main requirement is to not change the html for logged in users in order to have the template fully cacheable. This code breaks that requirement. – Fabio Jan 16 '13 at 14:54
Is there anything on the page that would indicate the user is logged in? use jquery to lookup the element's value in place of isLoggedIn – allanx2000 Jan 16 '13 at 19:07
No, that's the purpose of the whole thing. I want to have the same markup for logged and non logged users. The difference is handled server side with ajax. – Fabio Jan 16 '13 at 22:40
The state of the user's authentication may change between the time when the page was generated and when the ajax call is made. Given this, better bet on a mechanics supporting the real state. – Jean-Philippe Feb 15 '19 at 02:41

Get rid of a 401 (unauthorized) ajax error in browser console

Edit

2 Answers2

Linked