title: Angular.js $http.post TypeError: Cannot read property 'data' of undefined
body: <p>Angular.js v1.0.6</p>
  
  <p>When making an $http.post and receiving a non 200 resposne (401 in this case)</p>
  
  <pre><code>$http.post('http://localhost:3030/auth/login', {
    username: 'username',
    password: 'password'
  })
  .success(function(data) {
    // Gets called on a 200 response, but not on a 401
    console.log('success');
  })
  .error(function(err) {
    // Never gets called &amp; dies with error described below.
    console.log('error');
  });
  </code></pre>
  
  <p>Angular throws the following error:</p>
  
  <pre><code>TypeError: Cannot read property 'data' of undefined
      at http://localhost:9000/components/angular/angular.js:8891:22
      at wrappedCallback (http://localhost:9000/components/angular/angular.js:6797:59)
      at http://localhost:9000/components/angular/angular.js:6834:26
      at Object.Scope.$eval (http://localhost:9000/components/angular/angular.js:8011:28)
      at Object.Scope.$digest (http://localhost:9000/components/angular/angular.js:7876:25)
      at Object.Scope.$apply (http://localhost:9000/components/angular/angular.js:8097:24)
      at done (http://localhost:9000/components/angular/angular.js:9111:20)
      at completeRequest (http://localhost:9000/components/angular/angular.js:9274:7)
      at XMLHttpRequest.xhr.onreadystatechange (http://localhost:9000/components/angular/angular.js:9244:11) 
  </code></pre>
  
  <p>And never calls the either the <code>.success()</code> callback or <code>.error()</code> errback making it impossible to handle the response.  </p>
  
  <p>Am I doing something wrong? The success call back gets called as expected on provision of legit credentials.</p>
  
  <p>200 response:</p>
  
  <pre><code>Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With, Auth-Token
  Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
  Access-Control-Allow-Origin:*
  Connection:keep-alive
  Content-Length:99
  Content-Type:application/json
  Date:Thu, 16 May 2013 13:57:51 GMT
  
  {
    "auth-token":"676932cc1e183a64334345944ad432d1908f8110bc",
    "user": {
      "id":1,
      "username":"username"
    }
  }
  </code></pre>
  
  <p>401 response:</p>
  
  <pre><code>Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With, Auth-Token
  Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
  Access-Control-Allow-Origin:*
  Connection:keep-alive
  Content-Length:45
  Content-Type:application/json
  Date:Thu, 16 May 2013 13:58:25 GMT
  
  {
    "error": [
      {
        "message":"Invalid Credentials"
      }
    ]
  }
  </code></pre>
  
  <p>Further, if I adopt the normal promise syntax in favour of the .success() shortcuts I get some interesting behaviour:</p>
  
  <pre><code>$http.post('http://localhost:3030/auth/login', {
    username: username,
    password: password
  }).then(function (resp) {
    // On a 200 response, resp is a response object.
    // On a 401 response, resp is undefined.
    console.log(resp);
  }, function() {
    console.log('error');
  });
  </code></pre>