Angular $HTTP response SyntaxError: Unexpected token E答案

【问题标题】：Angular $HTTP response SyntaxError: Unexpected token EAngular $HTTP response SyntaxError: Unexpected token E
【发布时间】：2016-02-29 22:16:23
【问题描述】：

使用 Angular $HTTP 服务进行简单的 POST 调用： authService.login = 功能（用户名，密码）{ var credentials = 'username=' + 用户名 + '&' + 'password=' + 密码；

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

无法获取错误状态，而是得到 SyntaxError: Unexpected token E。控制台首先显示状态 401，并在解析错误之后立即显示。想知道它在幕后做了什么，它试图解析什么，以及为什么我无法让 error.status 工作。

【问题讨论】：

标签： javascript angularjs rest syntax error-handling

【解决方案1】：

问题可能在于您如何序列化数据。您可以尝试将它们作为对象直接传递给data，而不是自己构建字符串：

data: {username: username, password: password}

Angular 应该自己序列化数据对象中的信息。

如果这不起作用，Angular 也有一个内置的替代其默认序列化器的替代品，它模仿了 jQuery 中的序列化器。上面的文档是here。您使用此方法的请求如下所示：

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

如果您选择此选项，请不要忘记注入 $httpParamSerializerJQLike 作为依赖项。

【讨论】：

只有当请求被错误拒绝时才会发生这种情况，很可能是服务器问题。

【解决方案2】：

您的请求似乎已正确发送并且您收到了响应。

我尝试了一个返回401 状态码的RESTful 服务。这是我的 JavaScript 代码：

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);

在我的例子中，响应对象包含以下内容：

{
  "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"
}

可以帮助您查看响应内容（标头/有效负载）。例如，如果负载是 JSON 格式，则为 Content-Type 标头的值。也许响应的Content-Type 和实际内容之间存在差距。例如，您从纯文本内容中收到内容类型值为application/json。

我做了一个测试来模拟这种情况（内容类型为application/json的XML内容），我有以下错误：

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 尝试解析 JSON 内容，但由于格式错误，它无法解析并引发错误。

这似乎与您的错误相似。所以我认为问题不在于您的 Angular 应用程序，而在于服务器......

希望对你有帮助蒂埃里

【讨论】：