您的位置: 首页  >  技术问答  >  我不能从我的API检索数据使用Angular

我不能从我的API检索数据使用Angular

分类: 技术问答 • 2022-09-01 20:06:22
问题描述：


我已经使用NodeJS创建API，我试图从API检索数据使用AngularJS但是我不能输出任何数据。

这是我的API。正如你所看到的数据是JSON格式。实况链接到我的API我不能从我的API检索数据使用Angular

{"status":"success","data":[{"_id":"58175cb6f0c48b2b9821d799","listen_url":"https://www.youtube.com/watch?v=XSbZidsgMfw","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Yonkers_tyler_cover.jpg/220px-Yonkers_tyler_cover.jpg","producers":"Tyler, The Creator","label":"XL Recordings","artist":"Tyler, The Creator","song_title":"Yonkers ","__v":0},{"_id":"581760e7aa7eb70a8cf0d770","listen_url":"https://vimeo.com/179791907","image_url":"https://upload.wikimedia.org/wikipedia/en/2/2a/Frank_Ocean_Blonde_2.jpg","producers":"Frank Ocean & Om'Mas Keith","label":"Boys Don't Cry","artist":"Frank Ocean","song_title":"Nikes","__v":0},{"_id":"582199b38e7a590871b38893","listen_url":"https://www.youtube.com/watch?v=x4pon-hdEXU","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/fa/Domo_Genesis-The_Alchemist-No_Idols.jpg/220px-Domo_Genesis-The_Alchemist-No_Idols.jpg","producers":"Alchemist","label":"Self Released","artist":"Domo Genesis","song_title":"Elimination Chamber (featuring Earl Sweatshirt, Vince Staples & Action Bronson)","__v":0},{"_id":"58219ae58e7a590871b38894","listen_url":"https://soundcloud.com/defjam/frank-ocean-super-rich-kids","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/Super_Rich_Kids.jpg/220px-Super_Rich_Kids.jpg","producers":"Malay","label":"Def Jam","artist":"Frank Ocean","song_title":"Super Rich Kids (featuring Earl Sweatshirt)","__v":0},{"_id":"58219c0a8e7a590871b38895","listen_url":"https://www.youtube.com/watch?v=0FcDXL5Aw0o","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Hive-earlsweat.jpg/220px-Hive-earlsweat.jpg","producers":"randomblackdude and Matt Martians","label":"Tan Cressida","artist":"Earl Sweatshirt","song_title":"Hive (featuring Casey Veggies and Vince Staples)","__v":0},{"_id":"58219f3f8e7a590871b38896","listen_url":"https://vimeo.com/31781199","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/2/2e/Frank-Ocean-Thinkin-Bout-You-2012.png/220px-Frank-Ocean-Thinkin-Bout-You-2012.png","producers":"Shea Taylor","label":"Def Jam","artist":"Frank Ocean","song_title":"Thinkin Bout You","__v":0},{"_id":"5821a3e88e7a590871b38897","listen_url":"https://vimeo.com/49091270","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Frankoceanpyramids.jpg/220px-Frankoceanpyramids.jpg","producers":"Frank Ocean, Malay and Om'Mas Keith","label":"Def Jam","artist":"Frank Ocean","song_title":"Pyramids","__v":0},{"_id":"582b4010b5a2eb460b850a2c","listen_url":"https://www.youtube.com/watch?v=FCbWLSZrZfw","image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Chum_Earl_Sweatshirt.jpg/220px-Chum_Earl_Sweatshirt.jpg","producers":"randomblackdude, Christian Rich & Hugo (Outro)","label":"Tan Cressida","artist":"Earl Sweatshirt","song_title":"Chum","__v":0}]}

这里是AngularJS代码，你可以看到，我想创建一个循环，得到所有艺术家的名字和他们的歌曲标题：

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 



<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul> 
    <li ng-repeat="x in myData"> 
    {{ x.artist + ', ' + x.song_title}} 
    </li> 
</ul> 

</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("https://forgetthis-jafar70.c9users.io").then(function (response) { 
     $scope.myData = response.data.data; 
    }); 
}); 
</script> 

</body> 
</html>

我不不知道我做错了什么。

+1

我认为你需要启用CORS检索数据。 –

+0

您在使用API​​或AngularJS时遇到问题吗？你能在浏览器中获取该URL吗？你能用jQuery（或者你可能更熟悉的任何JavaScript）获得它吗？ –

+4

这里的错误是XMLHttpRequest无法加载https://forgetthis-jafar70.c9users.io/。请求的资源上没有'Access-Control-Allow-Origin'标头。您应该研究CORS，并在发布问题时发布错误，以便其他人不必代表您重新创建错误。 – Claies

答

您的模块声明后补充一点：

app.config(['$sceDelegateProvider', function($sceDelegateProvider) { 
     $sceDelegateProvider.resourceUrlWhitelist(['self', 'https://forgetthis-jafar70.c9users.io/**']); 

}]);
+0

谢谢你的工作。 –

答

感谢@Claies我不得不启用CORS。我不得不将这几行代码添加到我的index.js文件（nodejs）中。

server.use(function(req, res, next) { 
    res.header('Access-Control-Allow-Origin', '*') 
    res.header('Access-Control-Allow-Methods','GET,PUT,POST,DELETE') 
    res.header('Access-Control-Allow-Headers','Content-Type') 
    next() 
})

答

的第一件事情，我得到下面的错误而请求对API。

https://forgetthis-jafar70.c9users.io/ 503（服务不可用）

所以，我硬编码在控制器的响应：

var app = angular.module('myApp', []); 
 
app.controller('customersCtrl', function($scope) { 
 
    $scope.myData = [ 
 
     { 
 
     "_id":"58175cb6f0c48b2b9821d799", 
 
     "listen_url":"https://www.youtube.com/watch?v=XSbZidsgMfw", 
 
     "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Yonkers_tyler_cover.jpg/220px- Yonkers_tyler_cover.jpg", 
 
     "producers":"Tyler, The Creator", 
 
     "label":"XL Recordings", 
 
     "artist":"Tyler, The Creator", 
 
     "song_title":"Yonkers ", 
 
     "__v":0 
 
     }, 
 
     { 
 
     "_id":"581760e7aa7eb70a8cf0d770", 
 
     "listen_url":"https://vimeo.com/179791907", 
 
     "image_url":"https://upload.wikimedia.org/wikipedia/en/2/2a/Frank_Ocean_Blonde_2.jpg", 
 
     "producers":"Frank Ocean & Om'Mas Keith", 
 
     "label":"Boys Don't Cry", 
 
     "artist":"Frank Ocean", 
 
     "song_title":"Nikes", 
 
     "__v":0 
 
     }, 
 
     { 
 
     "_id":"582199b38e7a590871b38893", 
 
     "listen_url":"https://www.youtube.com/watch?v=x4pon-hdEXU", 
 
     "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/fa/Domo_Genesis-The_Alchemist-No_Idols.jpg/220px-Domo_Genesis-The_Alchemist-No_Idols.jpg", 
 
     "producers":"Alchemist", 
 
     "label":"Self Released", 
 
     "artist":"Domo Genesis", 
 
     "song_title":"Elimination Chamber (featuring Earl Sweatshirt, Vince Staples & Action Bronson)", 
 
     "__v":0 
 
     }, 
 
     { 
 
     "_id":"58219ae58e7a590871b38894", 
 
     "listen_url":"https://soundcloud.com/defjam/frank-ocean-super-rich-kids", 
 
     "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/Super_Rich_Kids.jpg/220px-Super_Rich_Kids.jpg", 
 
     "producers":"Malay", 
 
     "label":"Def Jam", 
 
     "artist":"Frank Ocean", 
 
     "song_title":"Super Rich Kids (featuring Earl Sweatshirt)", 
 
     "__v":0 
 
     }, 
 
     { 
 
     "_id":"58219c0a8e7a590871b38895", 
 
     "listen_url":"https://www.youtube.com/watch?v=0FcDXL5Aw0o", 
 
     "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/d/d0/Hive-earlsweat.jpg/220px-Hive-earlsweat.jpg", 
 
     "producers":"randomblackdude and Matt Martians", 
 
     "label":"Tan Cressida", 
 
     "artist":"Earl Sweatshirt", 
 
     "song_title":"Hive (featuring Casey Veggies and Vince Staples)", 
 
     "__v":0 
 
     }, 
 
     { 
 
     "_id":"58219f3f8e7a590871b38896", 
 
     "listen_url":"https://vimeo.com/31781199", 
 
     "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/2/2e/Frank-Ocean-Thinkin-Bout-You-2012.png/220px-Frank-Ocean-Thinkin-Bout-You-2012.png", 
 
     "producers":"Shea Taylor", 
 
     "label":"Def Jam", 
 
     "artist":"Frank Ocean", 
 
     "song_title":"Thinkin Bout You", 
 
     "__v":0 
 
     }, 
 
     { 
 
     "_id":"5821a3e88e7a590871b38897", 
 
     "listen_url":"https://vimeo.com/49091270", 
 
     "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/7/71/Frankoceanpyramids.jpg/220px-Frankoceanpyramids.jpg", 
 
     "producers":"Frank Ocean, Malay and Om'Mas Keith", 
 
     "label":"Def Jam", 
 
     "artist":"Frank Ocean", 
 
     "song_title":"Pyramids", 
 
     "__v":0 
 
     }, 
 
     { 
 
     "_id":"582b4010b5a2eb460b850a2c", 
 
     "listen_url":"https://www.youtube.com/watch?v=FCbWLSZrZfw", 
 
     "image_url":"https://upload.wikimedia.org/wikipedia/en/thumb/8/81/Chum_Earl_Sweatshirt.jpg/220px-Chum_Earl_Sweatshirt.jpg", 
 
     "producers":"randomblackdude, Christian Rich & Hugo (Outro)", 
 
     "label":"Tan Cressida", 
 
     "artist":"Earl Sweatshirt", 
 
     "song_title":"Chum", 
 
     "__v":0 
 
     } 
 
    ]; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="customersCtrl"> 
 
<ul> 
 
    <li ng-repeat="x in myData"> 
 
    {{ x.artist + ', ' + x.song_title}} 
 
    </li> 
 
</ul> 
 
</div>

相关推荐