javascript - "XMLHttpRequest cannot load"错误？

Question

这是完整的错误

XMLHttpRequest cannot load http://urbanetradio.com/wp-json/posts. The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8100' that is not equal to the supplied origin. Origin 'http://run.plnkr.co' is therefore not allowed access.

现在，我在很多关于 Access-Control-Allow-Origin 的帖子中看到，但没有人告诉我如何将其放入您的应用中，我正在使用 Firebase 作为后端。

Here is a jsbin或 Plunker为了防止您想看到错误，请在 jsbin 中不要打开应用程序内的控制台，而是打开浏览器控制台。

这就是我正在做的事情

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tabs",
      abstract: true,
      templateUrl: "tabs.html"
    })
    .state('tabs.news', {
      url: "/news",
      views: {
        'tab-news': {
          templateUrl: "tab-news.html",
          controller: 'NewsCtrl'
        }
      }
    })
   $urlRouterProvider.otherwise("/tabs/news");
})

.controller('NewsCtrl', function($scope,
                                 FreshlyPressed) {
  $scope.posts = [];
  $scope.doRefresh = function() {
    $scope.posts = FreshlyPressed.getBlogs($scope);
    $scope.$broadcast('scroll.refreshComplete');
  }
  $scope.doRefresh();
})

.service('FreshlyPressed', function($http) {
  return {
    getBlogs: function($scope) {
      $http.get('http://urbanetradio.com/wp-json/posts')
        .success(function(result) {
          $scope.posts = result;
        });
    }
  }
})

我正在向 WordPress 帐户发出 get 请求以获取帖子。这是一个移动应用程序，当我在网络浏览器中测试该应用程序时，一切正常，但是当我尝试在移动设备中打开该应用程序时，就会出现错误，并且我看不到帖子

here is the app just in case you want to test it

那么你认为我能在这里做什么？我必须将 Access-Control-Allow-Origin: * 放在哪里？

Answer 1

将 $http.get('http://urbaneradio.com/wp-json/posts') 替换为 $http.jsonp('http://urbaneradio.com/wp-json/posts') 并尝试主机是否支持 JSONP 而不是“安全性较低”的简单 JSON 请求。大多数 API 服务器都支持这一点，并且它克服了 Access-Control-Allow-Origin header 错误。