jQuery ajax handle 401 Unauthorized

Question

I am calling third party web page using jQuery ajax. According to their page they sent me status code 200 if log-in success and 401 if log-in unsuccessful. Here is my jquery code sample. This code works fine on IE but not work on Chrome or Firefox. What could be the issue?

$.ajax({
  type: 'GET',
  url: hostURL + 'j_teo_security_check?callback=?',
  dataType: 'json',
  data: ({j_username : $("#inp_user_name").val(), j_password: $("#inp_user_pwd").val()}),
  statusCode: {
      401:function() { alert("401"); },
      404:function() { alert("404"); },
      200:function() { alert("200"); },
      201:function() { alert("201"); },
      202:function() { alert("202"); }
    },
    complete: function(httpObj, textStatus){
    alert(httpObj.status);
  },
  error: function(){
    alert("error");
  },
  async: false
});

I tried all the functions error, success, complete, and statusCode. None of them handle the 401 error.

Woden

are the request/response ok on firebug? – Pageantry

What are the data sent on IE & Chrome (console.log them) ? Don't you have multiple elements with ID inp_user_name or inp_user_pwd ? Try adding a cache: false option. Also, you could remove the parenthesis on the data: ([...]) line. Also, do you have the HTML code used ? What type of elements are those "inp_user_xxx" ? – Amphipod

No. Everything works fine with request. There is no issue with status code 200 when I pass correct password. And It get the response code 401 when I send wrong password as it should be. I want to catch it when it is 401. But none of functions does support that. I tried all the functions error, success, complete, and statusCode. My requirement is to catch the 401 error. Not to stop it. – Woden

Try changing your request type from GET to HEAD, and console.log the returned result to see what status code is actually set in the header. Not sure it's pertinent, but also try to add a space after the code, like 401: function() {}, have used the statusCode settings several times without issue, also for 401's so that should work, not sure it works with json though. Is the request of same origin etc. – Demisec

Do you get an alert with this? error: function(xhr, status, thrownError) { alert(xhr.status) } – Merocrine

@Merocrine No. That's the strange issue I have. Even I thought it should alert something. – Woden

Answer 1

I could fix it as bellow.

$(document).ready(function(){
        $("#cmdLogin").click(function(){             
             var request = $.ajax({
                url : hostURL + 'j_teo_security_check',
                data: ({j_username : $("#inp_user_name").val(), j_password: $("#inp_user_pwd").val()}),
                dataType : "jsonp",
                timeout : 5000
            });

            request.success(function() {
                loginSuccess();
            });

            request.error(function(httpObj, textStatus) {       
                if(httpObj.status==200)
                    loginSuccess();
                else
                    loginFail();
            });
        });
    })

What I did was added timeout since 401 error never came back. Since it goes to error function even with status code 200 and parsing errors I made it to ignore status 200 inside the error.

Woden

Maybe this was the fix, but tbh on my case removing async:false fixed the issue. I can see you also removed this. It is in the question, but not in the answer. I can not understand why async: false create such an issue. My code is there for years and decided to stop working suddenly because of the async: false – Horal

Answer 2

Ok, it appears that you're using jsonp and I think it might be a limitation of jsonp. Take a look.

http://forum.jquery.com/topic/jquery-ajax-with-datatype-jsonp-will-not-use-error-callback-if-request-fails

Looks like there is a solution on the last post. Hope this helps!

Merocrine

The link is not available now, but see this thread as well: #19036057 – Dunn