Angular JSONP“未捕获的语法错误：意外的令牌：”答案

【问题标题】：Angular JSONP "Uncaught SyntaxError: Unexpected token :"Angular JSONP“未捕获的语法错误：意外的令牌：”
【发布时间】：2016-10-09 12:56:38
【问题描述】：

我正在尝试在我的 Angular 应用程序中向 http://catfacts-api.appspot.com/api/facts' 发出请求。我使用$http 服务对页面进行了http GET，但出现跨源错误：

$http({
    method: 'GET',
    url: 'http://catfacts-api.appspot.com/api/facts'
}).then(function(response) {
    console.log(response);
});

但我得到一个跨源错误

XMLHttpRequest cannot load http://catfacts-api.appspot.com/api/facts. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://cat-facts-alexwohlbruck.c9users.io' is therefore not allowed access.

我尝试使用 JSONP，但出现语法错误。我很困惑为什么会这样。

$http.jsonp('http://catfacts-api.appspot.com/api/facts?number=1&callback=JSON_CALLBACK').success(function(data) {
    console.log(data);
})

Uncaught SyntaxError: Unexpected token :          facts?number=1&callback=angular.callbacks._0:1

您可以查看页面here

【问题讨论】：

标签： angularjs http jsonp

【解决方案1】：

我认为你的 api 有错误，你当前的 api 状态

{"facts": ["在野外，狮子的平均寿命为 12 年，最长可达 16 年。它们在圈养中的寿命最长为 25 年。"], "success": "true"}

试试改成

{"facts": "在野外，狮子的平均寿命为 12 年，最长可达 16 年。它们在圈养中的寿命最长为 25 年。", "success": "true"}

只需去掉方括号，因为这个简单结果的json格式应该是

{"variable_name" : "value" , "variable_name" : "value"}

如果你想在这个对象中嵌套另一个对象，你需要使用方括号来表示例如

 "Names" : [   
                            { "firstName" : "John",  
                              "lastName"  : "Doe",
                              "age"       : 23 },

                            { "firstName" : "Mary",  
                              "lastName"  : "Smith",
                              "age"       : 32 }
                          ],  "some_var" : "some_val"}

如您所见，我们可以在“名称”中传递另一个对象，因为您只传递一个不需要使用方括号的字符串。

另一种解决方案可以是

{"facts": [ "newFact" : "在野外，狮子的平均寿命为 12 年，最长可达 16 年。它们在圈养中的寿命最长为 25 年。"], "success": "true "}

它应该可以工作。

【讨论】：

这不是我的API，方括号是一个可以包含多个事实的数组，例如catfacts-api.appspot.com/api/facts?number=5会返回数组中的5个事实
@Blu 是的，这是真的，但是你仍然会得到一个“Unexpected token:”错误，你需要在我建议的最后一个选项中添加，即构造你的 json 结果，如“{”facts ": [ "newFact": "一只猫会花费近 30% 的时间来梳理自己。", "newFact": "一只猫的视野大约是 200 度。"], "success": "true" }
facts 是一个数组。那里没有错。并且假设它是一个长度为 1 的数组，因为他在他的调用中传递参数 number=1

【解决方案2】：

你可以通过这两种方法来解决这个问题

1) 在您的 API 端点创建一个 Access-Control-Allow-Origin 标头。然后尝试一个简单的get。因为错误是，

请求的资源上不存在“Access-Control-Allow-Origin”标头。

Plunker：https://plnkr.co/edit/xFR0CEiZTioR2nEW4HEx

2) 如果您打算从 JSONP 请求中获取响应，则您的请求应包含在这样的回调中。

JSON_CALLBACK({
  "facts": ["Cats purr at the same frequency as an idling diesel engine, about 26 cycles per second."],
  "success": "true"
 })

现在您只返回 JSON 对象。笨蛋：https://plnkr.co/edit/M3c849O0PoAmxYbsk9tE

文档：https://docs.angularjs.org/api/ng/service/$http#jsonp

更新：在执行 get 请求时，谨慎的做法是返回标头 mimetype: application/json

更新 2：使用 `ngResource 也失败了。
猛戳：https://plnkr.co/edit/wdoD73920Mnc8RRmoUKX?p=preview

【讨论】：