我为我正在开发的应用程序编写了一个Flask后端。简而言之,当调用 http://localhost:5000/allsongs/ 时,它会返回类似(或非常类似)以下内容:
[["King And Lionheart", "Of Monsters And Men", "My Head Is An Animal", "mp3"], ["Just One Yesterday", "Fall Out Boy", "Save Rock And Roll", "mp3"], ["Laughter Lines", "Bastille", "All This Bad Blood", "mp3"]]
我正在尝试使用AngularJS编写一个Web应用程序,该应用程序从该URL读取数据并使用ng-repeat
创建一个我可以搜索的列表。到目前为止,我写了这个:
<!DOCTYPE html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<html ng-app="myApp">
<body>
<script>
angular.module('myApp', [])
.controller('Songs', function Songs($scope, $http) {
$http.get('http://localhost:5000/allmusic').then(function(response) {
$scope.songs = response;
});
}
);
</script>
<input placeholder="Search..." type="text" ng-model="search" />
<div ng-controller="Songs">
<p>{{songs}}</p>
</div>
<p ng-repeat="song in songs | filter:search | orderBy:name">{{ song }}</p>
</body>
</html>
加载页面时显示的所有内容都是页面顶部的搜索字段。
此外,当我刷新页面时,我看到我的Flask服务器被调用,所以我知道$http.get
在某种程度上有效。
任何建议都会很棒!
答案 0 :(得分:3)
当您不在服务器端呈现HTML时,它可能是一个CORS问题。所以你有两个选择。
index.html
的路由器,其中包含您需要的所有Angular代码。可悲的是我没有使用Flask的经验,但在Node.js,第二个解决方案可能看起来像那样
app.use((req,res)=>{
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
req.next();
});