0

I'm having this trouble of handling error responses in AngularJS while using $resource. My setup works perfectly with status 200 responses, but when the API throws out a 400 error I just get an empty object.

This is my controller:

$scope.createProduct = function() {
        Api.product.save($scope.product).$promise.then(
            function(res) {
                console.log(res);
            },
            function(error) {
                console.log(error);
            }
        )
    }

This is my Api service:

function ApiService($resource, API_URL) {
    return {
        product: $resource(
            API_URL + '/product/:product_id', { 'product_id': '@product_id' },
            {
                show: { method: 'GET' },
                update: { method: 'PUT', headers: {'Content-Type': 'application/json'} },
            }
        ),
    }
}

This is what console.log(error) prints out after a 400 error:

Object {data: null, status: -1, config: Object, statusText: ""}

And finally this is the error response API spits out which I don't get:

{
  "errors": {
    "message": [
      "The town field is required.",
      "The postcode field is required.",
    ]
  }
}

Any help would be appreciated, thanks!

EDIT: As an example try sending a POST request to https://api.twitter.com/1.1/statuses/destroy/1.json. If I do this on Postman, I get this error message:

{
  "errors": [
    {
      "code": 215,
      "message": "Bad Authentication data."
    }
  ]
}

How do I get this response and the string "Bad Authentication data." in Angular? For some reason I can not do this with my current setup.

Justin
  • 901
  • 8
  • 11
  • First check your browser console, do you really receive json from server? Try add `headers: {'Accept': 'application/json}` to your api save function. – adray Aug 02 '16 at 15:24
  • No, I get the "Failed to load response data" error in Chrome for this request so I assume I'm doing something wrong when calling the API. I do get the correct error response in Postman. And unfortunately adding that line did not help. – Justin Aug 02 '16 at 15:30
  • Post your api url and the object that needs to be send – Sajeetharan Aug 02 '16 at 15:35
  • It's a private API that I run locally, Sajeetharan, but it's just a simple POST request with JSON body in the request. – Justin Aug 02 '16 at 15:41
  • Where is `save` method of product service? – adray Aug 03 '16 at 10:42
  • The save method is defined by default in $resource object, as described here https://docs.angularjs.org/api/ngResource/service/$resource – Justin Aug 03 '16 at 11:16

1 Answers1

0

The issue may relate to interactions between your API server and CORS.

I am running a Flask based API backend that was presenting this same issue. Troubleshooting led me to discovering that my API was performing a TCP RST when receiving the POST request in around 9 out of 10 connections.

Wireshark capture

The Flask server was logging that the response was being sent back correctly.

2018-08-19 13:26:59,104 INFO: 127.0.0.1 - - [19/Aug/2018 13:26:59] "POST /users/test HTTP/1.1" 419]

Cause

The the cause of the issue was rejecting the POST request in the API backend without reading the POST data first. I refactored my API to always read POST data and this solved the problem.

It's not clear to me how CORS effects this situation, however this problem was only seen when making calls through Angular instead of directly to the API.

The following StackOverflow question pointed me in the right direction to solve this. No response with POST request and Content-Type "application/json" in flask

Matthew Field
  • 1