使用 jsonp 的角度 - 意外令牌答案

【问题标题】：angular using jsonp - unexpected token使用 jsonp 的角度 - 意外令牌
【发布时间】：2014-12-16 11:09:57
【问题描述】：

当我使用 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服务的正确方法吗？

请求头：

【问题讨论】：

标签： angularjs jsonp angular-http

【解决方案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>

【讨论】：

您好，感谢您的回复。尝试时似乎出现以下错误：XMLHttpRequest cannot load api.trademe.co.nz/v1/Search/Property/Residential.json。 HTTP 状态码 405 无效
@RajuKumar 您使用的是完全相同的代码示例吗？
我在按钮事件中使用了以下代码： $http.get("api.trademe.co.nz/v1/Search/Property/… (response) { console.log(response.data); });
@RajuKumar 真的很连线我已经更新了答案，一切正常
当我在我的应用程序之外运行它时它正在工作。我附上了发出请求时发送的请求标头。你觉得里面有什么奇怪的地方吗？

【解决方案2】：

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

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

【讨论】：