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.

Answer 1

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.