意外令牌：从角度 $http.jsonp 请求到 Instagram API答案

【问题标题】：unexpected token : from angular $http.jsonp request to Instagram API意外令牌：从角度 $http.jsonp 请求到 Instagram API
【发布时间】：2015-07-09 03:05:47
【问题描述】：

我正在向授权的 Instagram 帐户发出请求，以在网站上显示图像。最初，我在使用 Angular 的 $http.get(... 时遇到了 No 'Access-Control-Allow-Origin'。

来自Matt's answer in this question，看来我可以使用getJSON 或Angular $http.jsonp 来绕过这个问题。 That Guy's answer 还说“JSONP 确实是克服 XMLHttpRequest 同域策略的简单技巧”。

所以，我不再遇到这个问题，而是得到一个 json 有效负载：

{"pagination":{"next_url":"https:\/\/api.instagram.com... etc

但是我得到一个非常模棱两可的错误：

Uncaught SyntaxError: Unexpected token :

这是来自 Instagram API 的响应，所以我不确定为什么入站 json 会出现语法错误。此外，由于jsonp 响应都在一行中，因此很难找到错误... 报告错误的地方。

预览显示我得到了一个完整的有效载荷：

【问题讨论】：

如果API不返回jsonp，那可不是调用jsonp那么简单。如果 api 未启用 CORS 或未提供 jsonp 服务，则您需要在您的服务器或第三方服务上使用代理。仅仅因为您看到 json 有效负载，并不意味着浏览器将允许访问它

标签： json angularjs exception

【解决方案1】：

我发现了问题。不幸的是，没有 JavaScript libraries 来帮助解决这个问题，但是在 Instagram API docs 中，对于 JSONP，您可以使用回调包装响应，以便 json 有效负载将包装在 <script> 标签（more info on jsonp here）中，因此不是被访问控制允许来源阻止。

https://api.instagram.com/v1/tags/coffee/media/recent?access_token=ACCESS-TOKEN&callback=callbackFunction

回复：

callbackFunction({
    ...
});

因此，在您的 http 请求 URI 中，您添加了一个回调参数。由于我使用的是 Angular，他们的 $http.jsonp() 请求文档将回调字符串指定为“JSON_CALLBACK”。

所以，我对 Angular 的请求 URL 是：

$http.jsonp(
    'https://api.instagram.com/v1/tags/coffee/media/recent?
     access_token=ACCESS-TOKEN&callback=JSON_CALLBACK')
     .success(function(data) {...

【讨论】：