Subsequent JSONP requests give status 404 despite GET status 200

Question

So I am able to make the first JSONP request to the yelp API work to return business data for me, but any subsequent requests I make lead to the callback for failure that logs a status code of 404. Yet when I pull up the network tab in Chrome Dev Tools I see that all the subsequent GET requests I made all have status 200 and I do see valid response data. How can that be when the callback for failure was called? How can I fix this? I'd like to be able to receive data more than once.

The following code in question is based off the answer to this other question Yelp API and AngularJS, the difference being the statements directly below the comments

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="oauth-signature.js"></script>
</head>
<body ng-app="plunker">
    <div  ng-controller="MainCtrl">
        <p><date-input name="info.name" message="info.message"></date-input></p>
        <ul>
            <li data-ng-repeat="business in businesses">
                {{business.name}}
            </li>
        </ul>
    </div>
    <script>
        function randomString(length, chars) {
            var result = '';
            for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
            return result;
        }

        var app = angular.module('plunker', []);
        app.controller('MainCtrl', ['$scope', 'MyYelpAPI', function($scope, MyYelpAPI) {
            $scope.businesses = [];

            // first time for the callback gets executed
            MyYelpAPI.retrieveYelp('', function(data) {
                console.log('callback1');
                console.log('data');
                $scope.businesses = data.businesses;
            });

            // the second time for the callback doesn't get executed
            MyYelpAPI.retrieveYelp('', function(data) {
                console.log('callback2');
                $scope.businesses = data.businesses;
            });

        }]).factory("MyYelpAPI", function($http) {
            return {
                "retrieveYelp": function(name, callback) {
                    var method = 'GET';
                    var url = 'http://api.yelp.com/v2/search';
                    var params = {
                            callback: 'angular.callbacks._0',
                            location: 'San+Francisco',
                            oauth_consumer_key: '', 
                            oauth_token: '', 
                            oauth_signature_method: "HMAC-SHA1",
                            oauth_timestamp: new Date().getTime(),
                            oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
                            term: 'food'
                        };
                    var consumerSecret = '',
                    var tokenSecret = '',
                    var signature = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, { encodeSignature: false});
                    params['oauth_signature'] = signature;
                    $http.jsonp(url, {params: params})
                        .success(callback)
                        // second time fails
                        // data -> undefined; status -> 404
                        .error(function(data, status) {
                            console.log(data, status); // why is this happening?
                        });
                }
            }
        });
    </script>
</body>
</html>

i thin u need to do like this $http.jsonp("http://api.yelp.com/v2/search?callback=JSON_CALLBACK, params) .success(function() { //success }).error(function(){ //failure }) ; — Juned Lanja, Sep 09 '15 at 10:37
Adding the callback query parameter to the url did the trick. Thank you! — Kevin Pamaran, Sep 09 '15 at 10:43

score 0 · Accepted Answer · answered Sep 09 '15 at 13:04

0

You should do it like this :

$http.jsonp("api.yelp.com/v2/search?callback=JSON_CALLBACK", yourParams) 
.success(function() {
     //success callback
})
.error(function(){
     //error callback
}) ;

answered Sep 09 '15 at 13:04

Juned Lanja

1,390
8
20

Subsequent JSONP requests give status 404 despite GET status 200

1 Answers1

Linked