Question

我想从http://blog.neosavvy.com/?feed=rss2之类的内容中提取博客供稿，以便在不属于同一域的Angular应用程序中使用。

我打算使用ProxyPass，但是ProxyPass不适用于/？feed = rss2。我是否可以使用重写规则来避免Javascript在获取不在同一URL中的内容时遇到的跨域问题。

我使用AngularJS的服务来获取Feed内容，就像任何其他服务一样。

以下是我用于获取博客rss的代码：

$scope.getBlogPost = function() {
    $http({method:'GET', url:'http://blog.neosavvy.com/?feed=rss2'}).
        success(function (data, status, headers, config) {
            console.log("data returned");
        }).
        error(function (data, status, headers, config) {
            console.log("data not returned");
        });
}

这是我收到的错误 - 因此需要代理服务器或其他替代方案。

XMLHttpRequest无法加载http://blog.neosavvy.com/?feed=rss2。 Access-Control-Allow-Origin不允许原点http://local.something.com。

Answer 1

您可以使用YQL或Google Feed API

之类的内容

我用后者做了一个例子，你可以在这里查看：http://plnkr.co/edit/Plb1fz?p=preview

您可以使用Google Feed API，而不是使用$http服务，您的控制器将如下所示

app.controller('ctrl', function($scope) {
  var feed = new google.feeds.Feed("http://blog.neosavvy.com/?feed=rss2");
  feed.load(function(result) {
    $scope.$apply(function(){
      $scope.entries = result.feed.entries;
    })
  });
});

请注意，由于范围从Angular外部更改，因此需要调用$apply来通知Angular。

有些注意事项，首先您需要将以下脚本添加到文档中

https://www.google.com/jsapi
角sanitize.min.js

然后，由于必须首先加载Google Feed API，因此需要手动引导您的角度应用

google.load("feeds", "1");
google.setOnLoadCallback(function(){     
    angular.bootstrap(document.body, ['app']);
});

由于Feed包含html，因此您将 ngSanitize 模块声明为依赖项

var app = angular.module('app', ['ngSanitize']);

要显示Feed中的条目，您可以使用ngRepeater迭代收到的条目，当然使用ng-bind-html指令清理html。

<div ng-repeat='entry in entries'>
  <h1>{{entry.title}}</h1>
  <div ng-bind-html= "entry.content"></div>
</div>

Answer 2

相关网址是RSS Feed。没有跨站点脚本编写注意事项。 RSS是一种XML格式，旨在从任何地方提取。

任何JavaScript框架都可以满足您的要求。 "RSS" on Wikipedia

将Wordpress博客文章拉入Angular JS

2 个答案: