JSONP request gives 404 in Angular app

Question

I'm trying to get some data from an API with a JSONP request, but I get a 404 every time. I would assume my URL is wrong, but I can hit the URL manually in Chrome and get the desired response. My $http.jsonp request always errors with a 404 showing up in my console.log in the error callback.

Here's the code that makes the request:

$scope.fetchDefaultLabel = function () {
      // This code will eventually set the label to the site name when the endpoint field blurs.
      // Currently not working properly.
      if ($scope.endpoint) {
        var baseUrl = $scope.endpoint.split('/')[2];
        var siteNameUrl = 'http://' + baseUrl + '/api/sitename.json?callback=JSON_CALLBACK';
        console.log(siteNameUrl);
        $http.jsonp(siteNameUrl)
          .success(function(data, status, headers, config) {
            $scope.label = data;
          })
          .error(function(data, status, headers, config) {
            console.log('Data: ' + data);
            console.log('Status: ' + status);
            console.log('Headers: ' + headers);
            console.log('Config: ' + config);
          });
      }
    };

Network panel of Chrome Dev Tools shows a 200 response for the request with the response body I would expect, but that's not getting to Angular for whatever reason.

have you seen this already? http://stackoverflow.com/questions/19916362/angularjs-how-to-make-a-jsonp-request — klode, Jun 06 '14 at 01:46
@klode I have seen that. It may be that the API doesn't support JSONP requests. Is that possible? — raddevon, Jun 06 '14 at 16:49

score 5 · Accepted Answer · answered Jul 22 '14 at 17:26

5

After talking with some back-end developers, it appears the API I am using does not support JSONP. This is the reason I was getting a 404 on that request.

answered Jul 22 '14 at 17:26

raddevon

3,290
4
39
49

2

this is really a terrible way for angular to handle this kind of error. giving a 404 is confusing. how about it just says, "hey, there's no valid function to call in the script" and we'd all be on our merry way making sure the response is valid for jsonp – chrismarx Mar 26 '15 at 21:10

score 1 · Answer 2 · answered Jun 06 '14 at 01:31

1

can you provide the exact content of window.console.log(siteNameUrl) just before your ajax request and provide the result ?
Maybe try a siteNameUrl.toString() just in case it's a parsing problem
it seems that you're not requesting the exact same url...
Try even putting hard written the siteNameUrl you're using as siteNameUrl="www.someapi/api"

answered Jun 06 '14 at 01:31

Mahmal Sami

689
7
12

I'm not sure I can make the URL public, but I did try hard-coding a value into the variable. It doesn't seem to work that way either. At this point, I believe the API does not support JSONP requests. Is that possible? Do you have to intentionally add JSONP support to an API? – raddevon Jun 07 '14 at 16:16
1

Yes, you'll need a different implementation : [...] 'Note that for JSONP to work, a server must know how to reply with JSONP-formatted results' http://en.wikipedia.org/wiki/JSONP – Mahmal Sami Jun 10 '14 at 10:09

JSONP request gives 404 in Angular app

2 Answers2

Linked