Angular $HTTP response SyntaxError: Unexpected token E

Question

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.

branweb · Accepted Answer · 2015-11-26 18:57:17Z

0

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.

answered Nov 26, 2015 at 18:57

branweb

1717 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shmidtdan Over a year ago

This only occurs when the request rejected with error, most likely a server issue.

Thierry Templier · Accepted Answer · 2015-11-27 09:11:29Z

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

Collectives™ on Stack Overflow

Angular $HTTP response SyntaxError: Unexpected token E

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related