web-dev-qa-db-ja.com

JavaScript（外部ドメイン）を使用してRSSフィードを解析する方法は？

質問

RSSフィードを解析して、解析した詳細をHTMLページに表示する必要があります。

私が見つけたソリューション

JavaScriptを使用してRSSフィードを解析する方法は？ は非常によく似た質問で、私はそれに従いました。

上記の質問を使用して、次のコードを作成します。

 <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フィードを読み取るようにコードを変更するにはどうすればよいですか？

javascriptjqueryxmlrss
9
I am the Most Stupid Person

same-Origin policy が原因で、このエラーが発生しています。以下を参照するか、記事全体を読みます [〜＃〜] mdn [〜＃〜] ：

セキュリティ上の理由のため、ブラウザはスクリプト内から開始されたクロスオリジンHTTPリクエストを制限します。たとえば、XMLHttpRequestとFetch APIは同じオリジンポリシーに従います。これは、これらのAPIを使用するWebアプリケーションがHTTPリソースのみを要求同じOriginから）アプリケーションのロード元、以外の他のOriginからの応答に正しいCORSヘッダーが含まれていない場合）.

したがって、スクリプトはクロスオリジンHTTPリクエスト（XMLHttpRequestからjQuery.ajax()を使用）を実行して- https://feeds.feedburner.com/raymondcamdensblog?format=xml ですが、Access-Control-Allow-OriginのCORSヘッダーがFeedBurnerによって設定されていないため、「ロードに失敗しました...」エラー。 （ただし、ヘッダーが設定されていても、Origin（localhostまたはsome-domain.com）が含まれていない場合は、同じエラーが発生します。）

それでは、どのようにしてあなたJavaScriptを使用してRSSフィードを読み取るようにコードを変更し、そのエラーが発生しないようにすることができますか？

  1. @ Saeed が提案するように、サードパーティのWebサービスを使用します。

  2. フィードコンテンツをフェッチし、そのスクリプトに直接FeedBurnerからリクエストするか、実際のソースURLをリクエストするのではなく）するAJAXリクエストを行うサーバー側スクリプト（PHPを使用するなど）を作成します。例。

  3. 本当に必要な場合は、おそらく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;
?>

たとえば、それをfetch-feed.phpに保存し、JavaScript/jQueryスクリプトコードでfeed変数の値を次のように変更します。

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

そのように（つまり、独自のサーバー側スクリプトを使用して）、少なくともブラウザーが常にXMLHttpRequest（またはAJAX）リクエストを許可することを確認します（つまり、 「「Access-Control-Allow-Origin」ヘッダーがありません」エラー）

4
Sally CJ

https://rss2json.com のようなものを使用できます。 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);
  }
});
3
Saeed

CORS関連のエラーです。データをリクエストしているURLで[〜＃〜] cors [〜＃〜]が有効になっていないため、このエラーが発生しています。 CORSは「クロスオリジンリソースシェアリング」の略です。サーバーでCORSが有効になっている場合、ブラウザーでそのサーバーにリクエストを送信できます。そうでなければ、それはしません。

https://feeds.feedburner.com/raymondcamdensblog?format=xmlはCORSを有効にしていません。そのため、browserでは、そのサーバーにajaxリクエストを行うことができません。サーバーでリクエストを行い、自分のサーバーまたはCORSが有効になっているサーバーからブラウザーにデータを提供することで、問題を回避できます。

0
Shakil Ahmed

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/ を参照してください。

0
sdepold