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

问题

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

我找到的解决方案

这是一个非常相似的问题，我遵循了它

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

 <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>

$（文档）.ready（函数（）{
//要解析的提要
变量馈送=”https://feeds.feedburner.com/raymondcamdensblog?format=xml";
$.ajax（提要{
接受：{
xml：“应用程序/rss+xml”
},
数据类型：“xml”，
成功：功能（数据）{
//学分：http://stackoverflow.com/questions/10943544/how-to-parse-an-rss-feed-using-javascript
$（data）.find（“item”）.each（函数（）{//或“item”或任何适合您的提要的内容
var el=$（本）；
文件。填写（“---------------------------”）；
document.write（“标题：”+el.find（“标题”）.text（））；
document.write（“link:+el.find”（“link”）.text（））；
document.write（“description:”+el.find（“description”）.text（））；
});
}   
});
});

错误

加载失败 ：没有 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此，不允许访问源“”

我需要什么

---

如何更改代码以使用JavaScript读取RSS提要而不出现上述错误？

您可以使用类似的方法。 它将提要解析为javascript的json：

var feedURL = "https://feeds.feedburner.com/raymondcamdensblog?format=xml";
$.ajax({
  type: 'GET',
  url: "https://api.rss2json.com/v1/api.json?rss_url=" + feedURL,
  dataType: 'jsonp',
  success: function(result) {
    console.log(result);
  }
});

---

你之所以会犯这样的错误是因为这个错误。请参阅以下内容和/或阅读全文：

出于安全原因，浏览器限制跨源HTTP请求 从脚本中启动。例如，

XMLHttpRequest

和 获取API遵循相同的源策略。这意味着网络 使用这些API的应用程序只能从 应用程序从同一来源加载，除非响应 从另一个原点包括右CORS标头

因此，您的脚本正在通过

jQuery.ajax（）

）向发出跨源HTTP请求（使用

XMLHttpRequest

），但FeedBurner没有设置

访问控制允许源代码的CORS头，因此会出现“加载失败…”错误。（但即使设置了标题，如果它不包括您的源（
localhost
或
some domain.com
），您仍然会收到相同的错误。）

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

使用第三方web服务，就像@建议的那样

创建一个服务器端脚本（例如，使用PHP），获取提要内容并向该脚本发出AJAX请求，而不是直接从FeedBurner或实际的源URL请求。下面是一个简单的例子

如果我真的需要，我可能会要求FeedBurner设置适当的CORS头


获取提要内容的非常简单的PHP脚本示例：

<?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;
?>

通过这种方式（即使用您自己的服务器端脚本），您至少可以确保浏览器始终会批准您的
XMLHttpRequest
（或AJAX）请求。（即，您不会得到“否”访问控制允许来源“标题”错误）
这是一个与CORS相关的错误。您收到该错误是因为您请求数据的URL未启用CORS。CORS代表“跨来源资源共享”。如果服务器上启用了CORS，您的浏览器将允许您向该服务器发出请求。否则，它就不会

https://feeds.feedburner.com/raymondcamdensblog?format=xml
未启用CORS，因此您的浏览器将不允许您向该服务器发出ajax请求。您可以通过在您的服务器上发出请求来解决此问题，并从您自己的服务器或启用CORS的服务器向浏览器提供数据。
您还可以使用or，它具有良好的模板，非常易于使用：

// 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');
});

//jquery.rss的示例
$（“#您的div”）.rss（“https://feeds.feedburner.com/raymondcamdensblog?format=xml", {
限额:3,，
layoutTemplate:“
{entries}
”，
入口模板：“

{shortBodyPlain}
”
})
//香草RSS示例
const RSS=require（'vanilla-RSS'）；
const rss=新rss(
document.querySelector（“您的div”），
"https://feeds.feedburner.com/raymondcamdensblog?format=xml",
{ 
//选项在这里
}
);
rss.render（）。然后（（）=>{
log（“所有内容都已加载并呈现”）；
});

有关工作示例，请参见。
谢谢。这不是关于FeedBurner的，有很多网站。我有一些像AllTop的网站。我有PHP脚本。但问题是当有很多提要时，它会占用大量服务器资源。这就是为什么我想使用JS，这样我可以节省服务器资源。似乎现在唯一的解决方案是使用第三方服务。您可以从PHP脚本中利用缓存。如果你从WordPress抓取，你可以利用它们的瞬态和缓存API，还有一些插件，比如RSS抓取、解析等等，做得很好。但这似乎超出了问题的范围。因此，如果您需要进一步的帮助，我建议您提出一个针对PHP和RSS/Feed的新问题。准确地回答您的问题：如何在不出现上述错误的情况下将代码更改为使用JavaScript阅读RSS提要？不幸的是，我们对JavaScript（在浏览器中）无能为力，除非您的浏览器比这些旧，因为限制是由浏览器做出的。
// 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');
});