Question

我目前正在开发一个从外部API获取的Ionic App。因为这个API也是由我自己开发的，所以一切都是本地的。 API返回一个JSON数组。

我当前的控制器如下所示：

app.controller('ListController', ['$scope', '$http', function($scope, $http){
       $http.get('http://localhost:8080/api/getPoi/merzouga').success(function(data){
       $scope.pois = data;
   });
}]);

问题是，当我尝试将其加载到我的视图中时，我收到以下错误：

XMLHttpRequest cannot load http://localhost:8080/api/getPoi/merzouga. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

我不知道它是否相关，但Ionic正在端口8100和API 8080上提供。

关于如何在本地进行测试的任何想法？

Answer 1

在浏览器中安装并启用CORS插件。

Answer 2

浏览器告诉您如何解决问题。由于您在不同的端口中拥有API，因此您需要发送“Access-Control-Allow-Origin”标头以及您的响应（服务器端）。假设您正在使用Express，它将是这样的：

res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
res.header('Access-Control-Allow-Origin', '*');

甚至更好，您可以使用中间件：https://www.npmjs.com/package/cors

离子错误获取本地API

2 个答案: