Angular $http 服务/控制器到 JSONP

Posted 2023-03-03

【中文标题】Angular $http 服务/控制器到 JSONP

【英文标题】：Angular $http service / controller to JSONP

【发布时间】：2015-12-31 21:19:04

【问题描述】：

由于我的跨域错误，我正在尝试将我的 $http 调用转换为 JSONP 调用。

请求中没有“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“http://localhost:5000” 访问。

我是一个初学者，已经从我的控制器中提取了我的 GET 服务，我正在努力寻找根据 Angular 文档将 $http 更改为 $http.jsonp(url) 的位置

这是我的 service.js：

.service('NCAAF',function($http, $ionicLoading) 
  return 
    get: function() 
      $ionicLoading.show(
        template: 'Loading...',
        delay: 300
      )
      return $http (
      
        method: 'GET',
        cache: true,
        crossDomain: true,
        dataType: 'jsonp',
        url: 'https://www.kimonolabs.com/api/[key]?callback=JSON_CALLBACK',
        headers: 
              'authorization': 'Bearer [auth]'
        
      );
    
  ;
)

和controller.js：

.controller('NCAAFCtrl', function ($scope, NCAAF, $ionicPopup, $ionicLoading) 
  var doGet = function() 

    NCAAF.get().
      success(function (data) 
        $scope.data = data['results']['collection1'];
        $ionicLoading.hide();
      ).
      error(function () 
        $ionicLoading.hide();
        var alertPopup = $ionicPopup.alert(
          title: 'Something went wrong',
          template: 'Try reloading in a few seconds.'
        );
        alertPopup.then(function() 
          console.log('Fix this ish');
        );
      ).
       finally(function() 
        $scope.$broadcast('scroll.refreshComplete');
      );
    ;
  $scope.doRefresh = function() 
    doGet();
  ;

  doGet();
)

【参考方案1】：

JSONP 可以让你做 cors 请求，但这并不意味着你就能得到正确的响应。

JSONP 要求您将 JSON 响应包装到 javascript 函数调用中。 当您执行 JSONP 请求时，查询字符串将设置一个名为 'callback' 将告诉您的服务器如何包装 JSON 响应。

服务器应该使用请求字符串中的回调参数来设置 做出相应的回应。

所以响应应该是

callback([ “access_token”: “asdfsd”, “expires”: “86400" ,"type" : "bearer"
]);

从角度来看，它看起来像

angular.callbacks._0([ “access_token”: “asdfsd”, “expires”: “86400" ,“type” :
“bearer” ]);

但只是为了您有关如何进行 jsonp 调用的信息，请更改您的代码

return $http (
      
        method: 'GET',
        cache: true,
        crossDomain: true,
        dataType: 'jsonp',
        url: 'https://www.kimonolabs.com/api/[key]?callback=JSON_CALLBACK',
        headers: 
              'authorization': 'Bearer [auth]'
        
      );

到

 return $http.jsonp('https://www.kimonolabs.com/api/[key]?callback=JSON_CALLBACK',
headers: 
              'authorization': 'Bearer [auth]'
        
);