0

Having a lot of difficulty connecting to Etsy API with both http an jsonp.

URL works fine in the browser: https://openapi.etsy.com/v2/shops/GreatLakesModern/listings/active?api_key=5a61qc30hrvrqcperugollh5&fields=title&callback=JSON_CALLBACK

But gives 404 error with jsonp and 0 status error with $http.get

I don't believe it's an issue of CORS, because when I test other APIs on CodePen, they work. Substitute the Etsy URL and no luck.

Did some more research and found that Etsy is not CORS-compatible. With that knowledge, how should I proceed?

Example: http://codepen.io/SitePoint/pen/YXXQxj?editors=101

I've tried an assortment of solutions, but here is my current code:

var url = "https://openapi.etsy.com/v2/shops/GreatLakesModern/listings/active?api_key=5a61qc30hrvrqcperugollh5&fields=title&callback=JSON_CALLBACK";

$http.jsonp(url)               
            .success(function (data) {$scope.details = "Success";})
            .error(function (data, status) {$scope.details = "Nope"+""+status;});
James
  • 117
  • 1
  • 1
  • 10
  • Just because other APIs work, doesn't mean that the Etsy one won't fail because of CORS... – JoseM Aug 11 '15 at 19:28
  • CORS test showing that if fails: http://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=https%3A%2F%2Fopenapi.etsy.com%2Fv2%2Fshops%2FGreatLakesModern%2Flistings%2Factive%3Fapi_key%3D5a61qc30hrvrqcperugollh5%26fields%3Dtitle%26callback%3DJSON_CALLBACK&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote – JoseM Aug 11 '15 at 19:31
  • @JoseM That's fair enough. I actually just did some more research and found that Etsy is indeed not CORS compatible. With that knowledge, what do I do? – James Aug 11 '15 at 19:33
  • Here is the working omdbapi test: http://client.cors-api.appspot.com/client#?client_method=GET&client_credentials=false&server_url=http%3A%2F%2Fwww.omdbapi.com%2F%3Ft%3DSherlock%2520Holmes%26tomatoes%3Dtrue%26plot%3Dfull&server_enable=true&server_status=200&server_credentials=false&server_tabs=remote – JoseM Aug 11 '15 at 19:33
  • you need to call it from your own backend server (or create a proxy server). Their api may not be meant to consumed from a browser, and you may want to change your api_key now that it is in the public. – JoseM Aug 11 '15 at 19:36
  • @JoseM Thank you for the links. With Etsy being CORS incompatible, shouldn't a jsonp request still work? https://github.com/TIY-Houston-Front-End-Engineering/Notes-Sept-2014/blob/master/day20.md#jsonp-vs-json – James Aug 11 '15 at 19:38
  • For jsonp to work, the service itself needs to support it. They need to wrap the response in whatever you provide as the callback. See this: http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about – JoseM Aug 11 '15 at 19:39
  • @JoseM Ah! It finally clicked. That all makes sense. Thanks for the link. I really appreciate your help!! – James Aug 11 '15 at 19:48

1 Answers1

0

I just looked at the link you posted and it does seem that Etsy supports jsonp. But you have to change how you call their api.

Instead of https://..../active?api_key=...

You need to do https://..../active.js?api_key=...&callback=etsyResult123

Notice the addition of the .js part.

More precisely, with Angular's $http.jsonp api it would be 

var url = "https://openapi.etsy.com/v2/shops/GreatLakesModern/listings/active.js?api_key=5a61qc30hrvrqcperugollh5&fields=title&callback=JSON_CALLBACK";

Here is a working plnkr: http://plnkr.co/edit/ulaMTo?p=preview

JoseM
  • 4,302
  • 2
  • 24
  • 35
  • Yeah, I reviewed the Github link as well and found the same solution. The data can also be selectively requested with `&fields=title,url` (etc.) . Thanks so much for your persistence. – James Aug 14 '15 at 21:06