Subsequent JSONP requests give status 404 despite GET status 200

问题

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>

回答1:

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
}) ;

来源：https://stackoverflow.com/questions/32477053/subsequent-jsonp-requests-give-status-404-despite-get-status-200

标签

javascript

angularjs

asynchronous

jsonp

yelp