返回

使用javascript获取rss信息

记一次非常痛苦的经历——与CORS的不期而遇

缘起

最近突然突发奇想要写一个静态网页用来获取和整理rss。

然后就碰上了CORS——跨域访问这个离谱的东西。

本来我就没系统学过Js、Jquery,然后每一次报错都以为是自己写错了。最后才发现是这个东西根本就不能通过单一网页实现(至少对于现在的我是这样)。

什么是CORS

浏览器出于安全考虑,只允许请求当前域下的资源(同一请求协议http,https、同一域domain、同一端口port),只要不满足以上条件,统统都算跨域资源共享(Cross-origin resource sharing)

推荐参考文档2

CORS常见报错

如果这个家伙只是好好的运行也就算了,但是跨域共享的条件比较严苛。只要不满足要求的请求全部会被拒绝,然后报错。我今天已经看了这个不晓得多少次了:

Access to XMLHttpRequest at 'https://kermsite.com/index.xml' from origin 'https://neglectedflawlessdisassembler.kerms0.repl.co' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

翻译过来应该是:请求的服务器上面没有Access-Control-Allow-Origin标头。也就是说服务器上面根本就没有定义哪个可以访问?而不是我没有说我的origin源头是哪里??

应对CORS的方法(设置Originaccess-Control

为了能够完成跨域请求,正规的方法应该是在服务器端设置好访问权限控制,然后在客户端设置好源头。这样就完美符合跨域请求的验证要求了。

但是这个对我不太适用。本身弄客户端已经焦头烂额,真的懒得去分析服务器端是什么情况。

而且我还套了一个CDN,请求显示servercloudflare。我淦。

如果你同时管理服务器和客户端,可以参考文献2进行设置。

应对CORS的另外一种方法(JSONP)

使用json避免跨域请求被拒绝。

参考文献10-12

应对CORS的另外一种方法(API)

另外一种方法是使用现存的API进行读取,然后返回数据到我们的网页。

网上有很多关于利用GoogleAPI进行读取的例子,但是现在已经不运行了。

关于GoogleAPI的更多信息,参见参考文献3-5,这几篇文章都非常久远了。

现阶段谷歌应该只有一个adsAPI提供。参见文献6。

在谷歌停止服务之后,也有另外一些机构开始提供类似的API。有的可能要收费。

Github上的相关实践

enginkizil/FeedEk: FeedEk jQuery RSS/ATOM Feed Plugin (github.com) Recommend,和API整合在一起

FeedEk jQuery RSS/ATOM Feed Plugin (jquery-plugins.net) 同上

shenfeng/rssminer: An online rss reader written in clojure & javascript & java. (github.com) 整个RSSreader体系

osmoscraft/osmosfeed: Turn GitHub into an RSS reader 整个RSSreader体系。有中文文档。

js-rss-reader/rss.js at master · rpsthecoder/js-rss-reader (github.com)

node-rssparser/feed.js at master · tk120404/node-rssparser (github.com)

结语

不想再弄这个了。以后再来想办法吧。

附录

参考文献

  1. 跨域资源共享 - 维基百科,自由的百科全书 (wikipedia.org)
  2. 没错,就是Access-Control-Allow-Origin,跨域 - 简书 (jianshu.com)
  3. google提供的几种读取feed的API - kuber - 博客园 (cnblogs.com)
  4. Introducing the Google AJAX APIs | Developer.com
  5. How to work with RSS using Google Feed API and JavaScript - TechRepublic
  6. Introduction to Feeds Services | AdWords API | Google Developers
  7. No ‘Access-Control-Allow-Origin’ header: 跨域问题踩坑记录 - blayn - 博客园 (cnblogs.com)
  8. html - How to parse an RSS feed using JavaScript? - Stack Overflow Recommend
  9. RSS to JSON Converter online - rss2json.com
  10. jQuery jsonp跨域请求 - bojiangzhou - 博客园 (cnblogs.com)
  11. jQuery实现jsonp - 简书 (jianshu.com)
  12. JSONP 教程 | 菜鸟教程 (runoob.com)
  13. jQuery XML 错误“请求的资源上不存在‘Access-Control-Allow-Origin’标头." - IT宝库 (itbaoku.cn)
  14. XMLHttpRequest 无法加载,请求的资源上不存在“Access-Control-Allow-Origin"标头 - IT宝库 (itbaoku.cn)
  15. javascript - Access to fetch url been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. ReactJS - Stack Overflow

版权信息

本文原载于kermsite.com,复制请保留原文出处。

Built with Hugo
Theme Stack designed by Jimmy