it-swarm-pt.com

Como analisar um feed RSS usando JavaScript (domínio externo)?

pergunta

Eu preciso analisar um feed RSS e exibir os detalhes analisados ​​em uma página HTML.

Solução que encontrei

Como analisar um feed RSS usando JavaScript? é uma pergunta muito parecida e eu a segui.

Usando a pergunta acima, eu construo o seguinte código.

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

o erro

Falha ao carregar https://feeds.feedburner.com/raymondcamdensblog?format=xml : Nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado. Origem ' http: // localhost ' não tem, portanto, acesso permitido.

O que eu preciso

Como posso alterar meu código para ler feeds RSS usando JavaScript sem ficar acima do erro?

7

Você está recebendo esse erro por causa da política same-Origin . Veja abaixo e/ou leia o artigo completo em MDN :

Por motivos de segurança, os navegadores restringem solicitações HTTP de origem cruzada Iniciadas de dentro de scripts. Por exemplo, XMLHttpRequest e a API de busca Seguem a mesma política de origem. Isso significa que um aplicativo da Web Usando essas APIs só pode solicitar recursos HTTP da Mesma Origem o aplicativo foi carregado de a menos que a resposta da outra Origem inclui o direito cabeçalhos CORS.

Portanto, seu script está fazendo uma solicitação HTTP cross-Origin (que usa XMLHttpRequest até jQuery.ajax()) para https://feeds.feedburner.com/raymondcamdensblog?format=xml , mas o cabeçalho CORS de Access-Control-Allow-Origin é não sendo definido pelo FeedBurner, portanto, você obtém o erro "Falha ao carregar ...". (Mas mesmo que o cabeçalho estivesse definido, se não incluísse o seu Origem (localhost ou some-domain.com), você ainda receberia o mesmo erro.)

Então, como pode você alterar seu código para ler os feeds RSS usando JavaScript sem receber esse erro?

  1. Use um serviço da web de terceiros, exatamente como o @ Saeed sugerido.

  2. Crie um script do lado do servidor (por exemplo, usando PHP) que busca o conteúdo do feed e faça AJAX pedidos para esse script em vez de diretamente solicitando-o ao FeedBurner ou à URL de origem real. Veja abaixo um exemplo simples.

  3. Se eu precisasse, provavelmente pediria ao FeedBurner para definir os cabeçalhos CORS apropriados ...


Amostra de um script muito simples PHP para buscar o conteúdo do feed:

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

Por exemplo, você pode salvar isso em fetch-feed.php e, em seguida, no código de script JavaScript/jQuery, altere o valor da variável feed da seguinte forma:

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

Dessa forma (ou seja, usando seu próprio script do lado do servidor), você poderia pelo menos ter certeza de que o navegador sempre concederia sua solicitação XMLHttpRequest (ou AJAX). (isto é, você não receberia o erro "No 'Access-Control-Allow-Origin' header")

3
Sally CJ

Você poderia usar algo como https://rss2json.com . Analisa o feed para json para 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

É um erro relacionado ao CORS. Você está recebendo esse erro porque o URL de onde você está solicitando dados não temCORSenabled. CORS significa 'Compartilhamento de recursos de origem cruzada'. Se o CORS estiver habilitado em um servidor, seu navegador permitirá que você faça solicitações a esse servidor. Caso contrário, não será. 

https://feeds.feedburner.com/raymondcamdensblog?format=xml não tem o CORS habilitado, é por isso que o seu navegadornão permitirá que você faça solicitações de ajax para esse servidor. Você pode contornar isso fazendo as solicitações em seu servidor e fornecendo os dados para o navegador a partir de seu próprio servidor ou de um servidor que tenha CORS habilitado.

0
Shakil Ahmed