it-swarm.com.de

Wie analysiert man einen RSS-Feed mit JavaScript (External Domain)?

Frage

Ich muss einen RSS-Feed analysieren und die geparsten Details in einer HTML-Seite anzeigen. 

Lösung, die ich gefunden habe

Wie analysiert man einen RSS-Feed mit JavaScript? ist eine sehr ähnliche Frage und ich habe sie verfolgt.

Mit der obigen Frage baue ich den folgenden 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>

Der Fehler

Laden fehlgeschlagen https://feeds.feedburner.com/raymondcamdensblog?format=xml : Nein Der Header 'Access-Control-Allow-Origin' ist in der angeforderten .__ vorhanden. Ressource. Origin ' http: // localhost ' hat daher keinen Zugriff.

Was ich brauche

Wie kann ich meinen Code so ändern, dass er RSS-Feeds mit JavaScript liest, ohne dass eine Fehlermeldung angezeigt wird?

Sie erhalten diesen Fehler aufgrund der same-Origin-Richtlinie . Siehe unten und/oder lesen Sie den vollständigen Artikel unter MDN :

Aus Sicherheitsgründen beschränken Browser herkunftsübergreifende HTTP-Anforderungen, die aus Skripten heraus initiiert werden. Zum Beispiel folgen XMLHttpRequest und die Fetch-API der gleichen Origin-Richtlinie. Dies bedeutet, dass eine Webanwendung, die diese APIs verwendet, nur HTTP-Ressourcen anfordern kann von demselben Ursprung von dem die Anwendung geladen wurde, es sei denn die Antwort von dem anderen Ursprung enthält die richtigen CORS-Header.

Ihr Skript stellt also eine herkunftsübergreifende HTTP-Anfrage (die XMLHttpRequest bis jQuery.ajax() verwendet) an - https://feeds.feedburner.com/raymondcamdensblog?format=xml , aber der CORS-Header von Access-Control-Allow-Origin wird von FeedBurner nicht gesetzt, daher erhalten Sie die Meldung "Fehler beim Laden ... " Error. (Aber selbst wenn der Header gesetzt wäre, wenn er nicht Ihr Origin (localhost oder some-domain.com) Enthielte, würden Sie immer noch den gleichen Fehler erhalten .)

Wie können Sie also Sie Ihren Code ändern, um die RSS-Feeds mit JavaScript zu lesen, ohne dass dieser Fehler auftritt?

  1. Verwenden Sie einen Webdienst eines Drittanbieters, genau wie von @ Saeed empfohlen.

  2. Erstellen Sie ein serverseitiges Skript (z. B. mit PHP), das den Feed-Inhalt abruft und AJAX Anforderungen an dieses Skript stellt, anstatt direkt von FeedBurner anzufordern, oder die tatsächliche Quell-URL. Unten finden Sie ein einfaches Beispiel.

  3. Wenn ich wirklich müsste, würde ich FeedBurner wahrscheinlich bitten, die entsprechenden CORS-Header zu setzen ...


Beispiel für ein sehr einfach PHP Skript zum Abrufen des Feed-Inhalts:

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

Sie können dies beispielsweise unter fetch-feed.php Speichern und dann in Ihrem JavaScript/jQuery-Skriptcode den Wert der Variablen feed folgendermaßen ändern:

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

Auf diese Weise (d. H. Unter Verwendung Ihres eigenen serverseitigen Skripts) können Sie zumindest sicherstellen, dass der Browser immer Ihre Anforderung XMLHttpRequest (oder AJAX) gewährt. (d. h. Sie würden nicht den Fehler "Kein 'Zugriffskontrolle-Zulassen-Ursprung'-Header" erhalten.)

4
Sally CJ

Sie könnten etwas wie https://rss2json.com ..__ verwenden, das den Feed für Javascript in json analysiert:

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);
  }
});
2
Saeed

Es ist ein Fehler im Zusammenhang mit CORS. Sie erhalten diesen Fehler, weil für die URL, von der Sie Daten anfordern, CORS nicht aktiviert ist. CORS steht für "Cross-Origin Resource Sharing". Wenn CORS auf einem Server aktiviert ist, können Sie in Ihrem Browser Anfragen an diesen Server senden. Sonst geht es nicht. 

In https://feeds.feedburner.com/raymondcamdensblog?format=xml ist CORS nicht aktiviert. Aus diesem Grund lässt Ihr browser keine Ajax-Anforderungen an diesen Server zu. Sie können dies umgehen, indem Sie die Anforderungen an Ihren Server stellen und die Daten von Ihrem eigenen Server oder einem Server, auf dem CORS aktiviert ist, dem Browser zur Verfügung stellen.

0
Shakil Ahmed

Sie können auch jquery-rss oder Vanilla RSS verwenden.

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

Siehe http://jsfiddle.net/sdepold/ozq2dn9e/1/ für ein funktionierendes Beispiel.

0
sdepold