web-dev-qa-db-fra.com

Comment analyser un flux RSS en utilisant JavaScript (domaine externe)?

Question

J'ai besoin d'analyser un flux RSS et d'afficher les détails analysés dans une page HTML. 

Solution que j'ai trouvée

Comment analyser un flux RSS en utilisant JavaScript? est une question très similaire et je l'ai suivie.

En utilisant la question ci-dessus, je construis le code suivant.

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

L'erreur

Échec du chargement https://feeds.feedburner.com/raymondcamdensblog?format=xml : Non L'en-tête 'Access-Control-Allow-Origin' est présent sur le .__ demandé. Ressource. Origin ' http: // localhost ' n'est donc pas autorisé à accéder.

Ce dont j'ai besoin

Comment puis-je changer mon code pour lire les flux RSS en utilisant JavaScript sans obtenir l'erreur ci-dessus?

javascriptjqueryxmlrss
7
I am the Most Stupid Person

Vous obtenez cette erreur à cause de la politique même origine . Voir ci-dessous et/ou lisez l'article complet à MDN :

Pour raisons de sécurité, les navigateurs limitent les requêtes HTTP cross-Origin initié à partir de scripts. Par exemple, XMLHttpRequest et le L'API de récupération suit la politique de même origine. Cela signifie qu'un site web Une application utilisant ces API ne peut demander que des ressources HTTP de la même origine. à partir de laquelle l'application a été chargée, sauf si la réponse de l’autre Origine inclut le droit en-têtes CORS.

Votre script crée donc une requête HTTP cross-Origin (qui utilise XMLHttpRequest à jQuery.ajax()) vers https://feeds.feedburner.com/raymondcamdensblog?format=xml , mais l'en-tête CORS de Access-Control-Allow-Origin est n'étant pas défini par FeedBurner, vous obtenez donc l'erreur "Impossible de charger ...". (Mais même si l'en-tête était défini, s'il n'incluait pas votre Origine (localhost ou some-domain.com), vous obtiendrez toujours la même erreur.)

Alors, comment vous _ pouvez-vous changer votre code pour lire les flux RSS en utilisant JavaScript sans obtenir cette erreur?

  1. Utilisez un service Web tiers, comme ce que @ Saeed a suggéré.

  2. Créez un script côté serveur (par exemple, en utilisant PHP) qui extrait le contenu du flux et envoyez des requêtes AJAX à ce script au lieu de directement le demandant à FeedBurner ou à l'URL source réelle. Voir ci-dessous pour un exemple simple.

  3. S'il le fallait vraiment, je demanderais probablement à FeedBurner de définir les en-têtes CORS appropriés ...

Exemple d'un script très simple PHP permettant d'extraire le contenu du flux:

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

Ainsi, par exemple, vous pouvez enregistrer cela dans fetch-feed.php, puis dans votre code de script JavaScript/jQuery, modifier la valeur de la variable feed comme suit:

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

De cette façon (c’est-à-dire en utilisant votre propre script côté serveur), vous pourriez au moins vous assurer que le navigateur accordera toujours votre demande XMLHttpRequest (ou AJAX). (c'est-à-dire que vous n'obtiendrez pas l'erreur "Non," en-tête "Access-Control-Allow-Origin" ")

3
Sally CJ

Vous pouvez utiliser quelque chose comme https://rss2json.com . Il analyse le flux dans json pour javascript:

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

C'est une erreur liée à CORS. Vous obtenez cette erreur car l'URL d'où vous demandez les données n'a pas activé CORS. CORS signifie 'Partage de ressources d'origine croisée'. Si CORS est activé sur un serveur, votre navigateur vous permettra de faire des demandes à ce serveur. Sinon, ce ne sera pas. 

https://feeds.feedburner.com/raymondcamdensblog?format=xml n'a pas activé CORS, c'est pourquoi votre browser ne vous autorisera pas à envoyer de requêtes ajax à ce serveur. Vous pouvez le contourner en faisant des demandes sur votre serveur et en fournissant les données au navigateur à partir de votre propre serveur ou d'un serveur sur lequel CORS est activé.

0
Shakil Ahmed