angular使用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，请参阅下面的演示。

＆＃13;

＆＃13;

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


});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

可能不再实际，但对其他人可能有用。问题是您没有按照Trademe API的要求发送GET请求，但是当您向潜在的GET请求添加自定义标头（在Trademe案例中您可能发送oAuth标头）时，浏览器会发送另一个名为＆＃34;飞行前请求＆＃34;这是OPTIONS请求，根据您的屏幕截图，您可以看到Method is OPTIONS。理想情况下，Trademe应该正确回应它以允许GET请求本身具有自定义标头。可能由于安全措施而没有发生。顺便说一句，你不应该从客户端浏览器应用程序发送Auth密钥/秘密，无论如何它都是暴露的。这对我来说有点烦人，因为我想在不代理后端的情况下从客户端js应用程序进行快速测试，但要解决这个解决方案之一（对我有用）是使用＆＃34;后端＆＃ 34;代理电话。所以你的浏览器应用程序调用说一些node / php脚本，它执行Trademe API调用并将结果返回给浏览器。

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