您所在的位置:小祥子 » 编程 » JavaScript » 正文

跨域抓取博客园RSS

时间:2015-08-06 编辑:纸异兽 来源:CnBlogs

这两天在给博客做新的主题,一直在纠结是否要将博客园的博文迁到自己的博客下,这样做的唯一好处就是,大家可以直接在一个网站下进行life博文和tech博文的阅读

BUT,谈到技术博客的话,大部分的个人博客下面的技术博文的阅读量和博客论坛的阅读量数量级别相差太大了,所以在犹豫了一段时间后还是果断选择回了待在博客园,但是如果我想给个人网站加一个博客园技术文章的列表呢?即只是加一个博客园的入口而已

方案


我们可以分前端和后台两种思路来实现这个列表展示:

  1. 后台

    • 定时任务抓取博客园RSS,保存在数据库中,每次访问时查取(缺点:实时性差
    • 在每次访问时,实时抓取博客园列表RSS(缺点:延时太大 / 由于服务器部署在海外,从海外访问国内网站还是有相当大的延时的
  2. 前端

    • 每次访问时用JS去抓取博客园的RSS,并显示出来(缺点:并不能直接实现 / 这个做牵扯到跨域问题

实际与问题


对于后台来说,实现比较简单,但是性能并不能得到保障

可以看出来,最优的方法是使用前端来直接处理是最满意的,BUT AGAIN,它是不能实现的!!并没有什么用!!浏览器严格禁止跨域 《同源策略和跨域访问》http://blog.csdn.net/shimiso/article/details/21830313

从文中得到

虽然我们可以通过 标签来作跨域请求,但是javascript并不能去获取跨哉获得的数据

JSONP

我们可以使用JSONP去实现,但是RSS源大部分不会去这样做的

于是在我寻找最好的解决方法的时候,找到了 Google Feed Api https://developers.google.com/feed/?csw=1 ,这是一个专门拉取RSS的API,还好我们在城墙的保护下,让这种资本主义开发的烂API不能进入我国内陆。

CORS

也可以用CORS来去做,但是这等于抛弃了IE9及以下的用户 (洒脱的人可以使用)

对于 CORS 的使用,要在服务器上配置

Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600

对于上面的配置,都要要求我们通过服务器设置于Response Header中的,最主要的设置则是第一条设置,也可以仅加设该一条配置,当设置成*时,则表示该网页可以向所有域名发起跨域请求,这样设置则会比较危险。在页面上我们则可以使用创建XMLHttpRequest来请求允许范围内的数据。

IE8与IE9默认是不打开允许跨域的选项的,得手动去Internet选项中打开才可以使用该功能。

我们可以根据自己的应用场景来选择更适合自己的方法,而最为稳定的方法则是通过服务器去处理,但是并不能保证性能。

此乃,掌鱼之弈

Finish

关键词:抓取 RSS