CODEWITHSUNDEEP
javascriptangularjsrestsyntaxerror-handling
shmidtdan
shmidtdan

Reputation: 51

Angular $HTTP response SyntaxError: Unexpected token E

Making a simple POST call using Angular $HTTP service: authService.login = function(username, password){ var credentials = 'username=' + username + '&' + 'password=' + password;

        return $http({
            method: 'POST',
            url: href,
            headers: {'accept': acceptValue, 'content-type': contentType},
            data: credentials
        }).then(onSuccess, onError);
    };

Can't get the error status, instead I get SyntaxError: Unexpected token E. the console first show the status 401 and immediately after the parse error. wonder what it does under the hood, what is it trying to parse, and why I'm not able to get error.status to work.

Upvotes: 1

Views: 4418

Answers (2)

Thierry Templier
Thierry Templier

Reputation: 202156

It seems that you request is correctly sent and you receive the response.

I made a try with a RESTful service that returns an 401 status code. Here is my JavaScript code:

var href = 'https://contactsapi.apispark.net/v1/contacts/';
var acceptValue = 'application/json';
var contentType = 'application/json';
var credentials = {}; //'something';

function onSuccess(data, status, headers, config) {

}

function onError(data, status, headers, config) {
  console.log('data = '+JSON.stringify(response, null, 2));
}

$http({
    method: 'POST',
    url: href,
    headers: {'accept': acceptValue, 'content-type': contentType},
    data: credentials
    }).then(onSuccess, onError);

The response object contains in my case the following:

{
  "data": {
    "code": 401,
    "contactEmail": null,
    "description": "The request requires user authentication",
    "homeRef": "/",
    "reasonPhrase": "Unauthorized",
    "uri": "http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html#sec10.4.2"
  },
  "status": 401,
  "config": {
    "method": "POST",
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "url": "http://localhost:8182/contacts/",
    "headers": {
      "accept": "application/json",
      "content-type": "application/json"
    },
    "data": {}
  },
  "statusText": "Unauthorized"
}

What could help you is to have a look at the response content (headers / payload). For example, if the payload is a JSON one, the value of the Content-Type header. Perhaps there is a gap between the Content-Type of the response and the actual content. For example, you received from plain text content with content type value application/json.

I made a test to simulate such case (XML content with a content type application/json) and I have the following error:

SyntaxError: Unexpected token <
  at Object.parse (native)
  at vc (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:15:480)
  at Zb (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:82:229)
  at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:83:143
  at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:7:322)
  at dd (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:83:125)
  at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:84:380)
  at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:119:113
  at n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:133:221)
  at n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:130:233)

Angular tries to parse JSON content but since it's malformed, it can't and throws an error.

It seems to be similar to your error. So I think the problem isn't in your Angular application but in the server...

Hope it helps you, Thierry

Upvotes: 0

branweb
branweb

Reputation: 171

The problem could be with how you are serializing your data. Rather than build the string yourself, you might try passing them directly into data as an object:

data: {username: username, password: password}

Angular should serialize the info in the data object by itself.

If that doesn't work, Angular also has a built-in alternative to its default serializer that mimics the one found in jQuery. Docs on it are here. Your request with this method would look something like:

            $http({
                url: "/auth/login",
                method: "POST",
                headers: {"Content-Type": "application/x-www-form-urlencoded"},
                data: $httpParamSerializerJQLike({
                    email: email,
                    password: password
                })
            })

If you go with this option, don't forget to inject $httpParamSerializerJQLike as a dependency.

Upvotes: 0

Related Questions