如何使用 JavaScript(外部域)解析 RSS 提要? [英] How to parse an RSS feed using JavaScript (External Domain)?

问题描述

问题

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

I need to parse an RSS feed and display the parsed details in an HTML page.

我找到的解决方案

如何使用 JavaScript 解析 RSS 提要?是一个非常相似的问题，我遵循了它.

How to parse an RSS feed using JavaScript? is a very similar question and I followed it.

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

Using above question, I build the following code.

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

Failed to load https://feeds.feedburner.com/raymondcamdensblog?format=xml: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

我需要什么

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

How can I change my code to read RSS feeds using JavaScript without getting above error?

推荐答案

由于 同源政策.请参阅下文和/或在 MDN 上阅读全文:

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

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest and the Fetch API follow the same-origin policy. This means that a web application using those APIs can only request HTTP resources from the same origin the application was loaded from, unless the response from the other origin includes the right CORS headers.

所以你的脚本正在发出一个跨域 HTTP 请求(它使用 XMLHttpRequest 通过 jQuery.ajax())来https://feeds.feedburner.com/raymondcamdensblog?format=xml，但是Access-Control-Allow-Origin 未由 FeedBurner 设置，因此您会收到无法加载..."错误.(但即使设置了标头，如果它不包含您的 origin(localhost 或 some-domain.com)，您d 仍然得到同样的错误.)

So your script is making a cross-origin HTTP request (which uses XMLHttpRequest through jQuery.ajax()) to https://feeds.feedburner.com/raymondcamdensblog?format=xml, but the CORS header of Access-Control-Allow-Origin is not being set by FeedBurner, therefore you get the "Failed to load ..." error. (But even if the header was set, if it didn't include your origin (localhost or some-domain.com), you'd still get the same error.)

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

So how can you change your code to read the RSS feeds using JavaScript without getting that error?

1. 使用第三方网络服务，就像@Saeed 建议的那样.

创建一个服务器端脚本(例如使用 PHP)来获取提要内容并向该脚本发出 AJAX 请求，而不是直接从 FeedBurner 或实际的源 URL 请求它.请参阅下面的简单示例.

Create a server-side script (e.g. using PHP) that fetches the feed content and make AJAX requests to that script instead of directly requesting it from FeedBurner, or the actual source URL. See below for a simple example.

如果真的有必要，我可能会要求 FeedBurner 设置适当的 CORS 标头...

If I really had to, I'd probably ask FeedBurner to set the appropriate CORS headers...

<小时>

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

---

Sample of a very simple PHP script for fetching the feed content:

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

例如，您可以将其保存到 fetch-feed.php，然后在您的 JavaScript/jQuery 脚本代码中，更改 feed 变量的值，例如所以:

So for example, you could save that to fetch-feed.php, and then in your JavaScript/jQuery script code, change the value of the feed variable like so:

var feed = "http://localhost/path/to/fetch-feed.php";

那样(即使用您自己的服务器端脚本)，您可以至少确保浏览器始终会批准您的 XMLHttpRequest(或 AJAX)请求.(即您不会收到No 'Access-Control-Allow-Origin' 标头"错误)

That way (i.e. using your own server-side script), you could at least be sure that the browser would always grant your XMLHttpRequest (or AJAX) request. (i.e. you wouldn't get the "No 'Access-Control-Allow-Origin' header" error)

这篇关于如何使用 JavaScript(外部域)解析 RSS 提要?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！