Question

问题

我需要解析RSS feed，并在HTML页面中显示已解析的详细信息。

我找到的解决方案

How to parse an RSS feed using JavaScript?是一个非常相似的问题，我也遵循它。

使用上述问题，我构建了以下代码。

 <script>
  $(document).ready(function() {
    //feed to parse
    var feed = "https://feeds.feedburner.com/raymondcamdensblog?format=xml";

    $.ajax(feed, {
        accepts:{
            xml:"application/rss+xml"
        },
        dataType:"xml",
        success:function(data) {
            //Credit: http://stackoverflow.com/questions/10943544/how-to-parse-an-rss-feed-using-javascript

            $(data).find("item").each(function () { // or "item" or whatever suits your feed
                var el = $(this);
                document.write("------------------------");
                document.write("title      : " + el.find("title").text());
                document.write("link       : " + el.find("link").text());
                document.write("description: " + el.find("description").text());
            });


        }   
    });

});
</script>

错误

无法加载 https://feeds.feedburner.com/raymondcamdensblog?format=xml：否请求中存在“ Access-Control-Allow-Origin”标头资源。因此，不允许访问来源“ http://localhost”。

我需要的

如何更改我的代码以使用JavaScript读取RSS feed，而又不会出现上述错误？

Answer 1

您可以使用类似https://rss2json.com的名称。它将供稿解析为javascript的json：

pS, pE = zip(*[(n - 41, m + 40) if n < m else (n + 40, m - 40)
           for n, m in zip(start, end)])

Answer 2

由于same-origin policy，您将收到该错误。请参见下文和/或阅读完整的文章，网址为MDN：

出于安全性原因，浏览器限制了跨域HTTP请求从脚本内部启动。例如，XMLHttpRequest和提取API遵循同源政策。这意味着一个网络使用这些API的应用程序只能从相同来源应用程序是从中加载的，除非响应来自其他来源的包括正确的 CORS标头。

因此，您的脚本正在向https://feeds.feedburner.com/raymondcamdensblog?format=xml发出跨域HTTP请求（使用XMLHttpRequest至jQuery.ajax()），但{{ 1}}尚未由FeedBurner设置，因此会出现“无法加载...”错误。（但是即使设置了标头，如果标头不包含您的起源（Access-Control-Allow-Origin或localhost），您仍然会遇到相同的错误。）

那么您如何更改代码以使用JavaScript读取RSS提要而又不会出现该错误？

使用第三方Web服务，就像@ Saeed建议的一样。
创建一个服务器端脚本（例如，使用PHP）来获取供稿内容并向该脚本发出AJAX请求，而不是直接从FeedBurner或实际源URL请求。参见下面的简单示例。
如果确实需要，我可能会要求FeedBurner设置适当的CORS标头...

一个非常简单的 PHP脚本示例，用于获取提要内容：

some-domain.com

例如，您可以将其保存到<?php // Set the feed URL. $feed_url = 'https://feeds.feedburner.com/raymondcamdensblog?format=xml'; // Fetch the content. // See http://php.net/manual/en/function.file-get-contents.php for more // information about the file_get_contents() function. $content = file_get_contents( $feed_url ); // Set the Content-Type header. header( 'Content-Type: application/rss+xml' ); // Display the content and exit. echo $content; exit; ?>，然后在JavaScript / jQuery脚本代码中，像这样更改fetch-feed.php变量的值：

feed

通过这种方式（即使用您自己的服务器端脚本），您至少可以确保浏览器始终会同意您的var feed = "http://localhost/path/to/fetch-feed.php";（或AJAX）请求。（即您不会收到“没有'Access-Control-Allow-Origin'标头”错误）

Answer 3

这是与CORS相关的错误。您收到该错误消息是因为您请求数据的URL尚未启用 CORS 。 CORS代表“跨源资源共享”。如果在服务器上启用了CORS，则浏览器将允许您向该服务器发出请求。否则，它将不会。

https://feeds.feedburner.com/raymondcamdensblog?format=xml未启用CORS，这就是为什么您的浏览器不允许您向该服务器发出Ajax请求的原因。您可以通过在服务器上发出请求来解决它，并将数据从您自己的服务器或启用了CORS的服务器提供给浏览器。

Answer 4

您还可以使用jquery-rss或Vanilla RSS，它们带有漂亮的模板并且非常易于使用：

// Example for jquery.rss
$("#your-div").rss("https://feeds.feedburner.com/raymondcamdensblog?format=xml", {
    limit: 3,
    layoutTemplate: '<ul class="inline">{entries}</ul>',
    entryTemplate: '<li><a href="{url}">[{author}@{date}] {title}</a><br/>{shortBodyPlain}</li>'
})

// Example for Vanilla RSS
const RSS = require('vanilla-rss');
const rss = new RSS(
    document.querySelector("#your-div"),
    "https://feeds.feedburner.com/raymondcamdensblog?format=xml",
    { 
      // options go here
    }
);
rss.render().then(() => {
  console.log('Everything is loaded and rendered');
});

有关有效的示例，请参见http://jsfiddle.net/sdepold/ozq2dn9e/1/。

如何使用JavaScript（外部域）解析RSS feed？

4 个答案: