使用jsonp的角度-意外令牌

Question

当我使用Jsonp调用“ http://api.trademe.co.nz/v1/Search/Property/Residential.xml ”时，出现意外的令牌错误。

我正在使用下面的代码来调用api

$http.jsonp("http://api.trademe.co.nz/v1/Search/Property/Residential.json?callback=?").success((data) => {

                console.log(data);
            });

知道为什么我会收到此错误吗？ 那是调用jsonp服务的正确方法吗？

请求标头：

Answer 1

您可以使用http.get调用api.trademe.co.nz，请参见下面的演示。

 var app = angular.module('app', []); app.controller('fCtrl', function($scope, $http) { $http.get("http://api.trademe.co.nz/v1/Search/Property/Residential.json").then(function(response) { console.log(response.data) $scope.data = response.data }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app"> <div ng-controller="fCtrl"> <p ng-repeat="item in data.List"> {{item.Title}} </p> </div> </div> 

Answer 2

可能不再是实际的了，但可能会对其他人有用。 问题是您没有按照Trademe API的要求发送GET请求，但是当您向潜在的GET请求添加自定义标头（在Trademe情况下，您可能发送oAuth标头）时，浏览器会发送另一个称为“预检请求”的OPTIONS请求，根据您的屏幕截图，您可以看到Method is OPTIONS。 理想情况下，Trademe应该正确地对此做出响应，以允许具有自定义标头的GET请求本身。 可能由于安全措施而没有发生。 顺便说一句，无论如何，您都不应从客户端浏览器应用程序发送已公开的身份验证密钥/秘密。 我也很烦，因为我想从客户端js应用程序进行快速测试而不代理后端，但是要解决此问题（对我有用）的一种解决方案是使用“后端”代理调用。 因此，您的浏览器应用程序调用会说一些node / php脚本，该脚本会执行Trademe API调用并将结果返回给浏览器。

有关CORS和飞行前请求的更多信息： http : //www.html5rocks.com/en/tutorials/cors/#toc-types-of-cors-requests