angular using jsonp - unexpected token

Question

When i call "http://api.trademe.co.nz/v1/Search/Property/Residential.xml" using Jsonp I get an unexpected token error.

I'm using the code below to call the api

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

                console.log(data);
            });

Any idea why i am getting this error? is that the correct way of calling jsonp service?

Request Header: enter image description here

sylwester · Accepted Answer · 2014-10-21T09:44:03.017

1

It seams that you can call api.trademe.co.nz using http.get please see demo below.

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>

edited Oct 21 '14 at 09:44

answered Oct 21 '14 at 09:28

sylwester

16,498
1
25
33

Hi Thanks for reply. I seem to be getting the following error when i try it: XMLHttpRequest cannot load http://api.trademe.co.nz/v1/Search/Property/Residential.json. Invalid HTTP status code 405 – Raju Kumar Oct 21 '14 at 09:38
@RajuKumar are you using exactly this same code sample which is in answer ? – sylwester Oct 21 '14 at 09:40
I'm using the following code in a button event: $http.get("http://api.trademe.co.nz/v1/Search/Property/Residential.json").then(function (response) { console.log(response.data); }); – Raju Kumar Oct 21 '14 at 09:41
@RajuKumar that's really wired I've updated answer and everything is working – sylwester Oct 21 '14 at 09:44
It's working when i run it outside my application. I've attached the request header which is sent when making the request. Do you see anything odd in it? – Raju Kumar Oct 21 '14 at 09:52
@RajuKumar no idea why but your request method is OPTIONS instead of GET – sylwester Oct 21 '14 at 09:55
found the issue. It was my http interceptor adding a authorization header with request token when i was calling the trademe api. For some wired reason this override angular's CROS settings which resulted in the "Option" request method. – Raju Kumar Oct 21 '14 at 10:39

score 0 · Answer 2 · answered Dec 10 '14 at 07:16

Probably not actual anymore, but would be useful for someone else maybe. The thing is you are not sending GET request as required by Trademe API, but as you add custom headers (in Trademe case you probably send oAuth header) to a potential GET request, browser sends another what's called "preflight request" which is OPTIONS request, as per your screenshot you can see Method is OPTIONS. And ideally Trademe should correctly respond back on that to allow the GET request with custom headers itself. Probably it's not happening because of a security measures. By the way you shouldn't send Auth keys/secrets from the client browser app anyway as it's exposed. It was a bit annoying for me too as I wanted to do a quick test from a client js app without proxying to a backend, but to solve this one of the solutions (which worked for me) was using a "backend" proxy call. So your browser app calls say some node/php script which does a Trademe API call and returns the result to the browser.

More about CORS and preflight requests: http://www.html5rocks.com/en/tutorials/cors/#toc-types-of-cors-requests

angular using jsonp - unexpected token

2 Answers2