在 JQuery 中使用 CORS 获取 RSS 文件答案

【问题标题】：Using CORS in JQuery to fetch RSS file在 JQuery 中使用 CORS 获取 RSS 文件
【发布时间】：2017-04-25 16:25:14
【问题描述】：

我可能做错了...我觉得我在乱写代码...

我是从这个开始的：

function getData(){
//getting XML data
  $.get('http://rss.cnn.com/rss/edition.rss', function(d){
    //need to capture the data to process the data.
    //we are representing the data with the letter d
    console.log(d); //this method is good to see the structure of the data if you don't know it already
     $(d).find('item').each( function(){
        //find each item and do the following:
        var article = $(this);
        var title = article.find('title').text();
        var description = article.find('description').text();
        var guid = article.find('guid').text();
        var date = article.find('pubDate').text();
        var theText = '<article><h3><a href="'+guid+'">'+title+'</a></h3><p>Published on:'+date+'</p><p>'+description+'</p>';
        $('#content').append(theText);
       }); //end each
     }) //end anon func
  }//end getData();
getData();

我得到以下信息：请求的资源上不存在“Access-Control-Allow-Origin”标头。

好的....所以我浏览了整个网络。我在 chrome 上找到了一个扩展，如果启用它就可以工作——但这对我的实时网站没有帮助。在网上上下查找有关 CORS 的信息，但我不理解文档。我的印象是我必须传递标头信息，但我不确定在哪里或如何传递。

我找到了这个并试了一下：

$.ajax({
   type: "GET",
   headers: {"Access-Control-Allow-Origin": "http://rss.cnn.com",
   "Access-Control-Allow-Headers":"content-type"            },
   url: "http://rss.cnn.com/rss/edition.rss"
  }).done(function (data) {
    console.log(data);
    });

这是我现在收到的错误消息：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

问我可能看起来很傻，但是请求的资源是我想要从中获取数据的 rss 提要吗？还是我的文件。我已经阅读了很多关于此的内容，以至于我的头和眼睛因困惑而旋转。请帮忙！

谢谢

【问题讨论】：

这意味着 CNN 不允许使用客户端 JavaScript 从它自己的域以外的任何域中获取 http://rss.cnn.com/rss/edition.rss。
他们必须添加Access-Control-Allow-Origin 标头；除了通过服务器而不是直接在浏览器中请求之外，您无能为力。

标签： javascript jquery xml cors

【解决方案1】：

您询问的资源（rss 文件）在 CNN 的服务器中。但是，它们不允许您从浏览器访问。这就是您收到 CORS 错误的原因。有多种方法可以克服这个问题，例如使用 JSONP。但是，CNN 仍然必须在其服务器中启用 jsonp。

你唯一能做的就是在服务器端启用Access-Control-Allow-Origin，然后请求。

【讨论】：

【解决方案2】：

var requestOptions: RequestInit = {
    method: 'GET',
    redirect: 'follow'
  };
  const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
  
  fetch(CORS_PROXY + "http://fetchrss.com/rss/5f56c6803c140278522985135f56c72f61579219a908f6e2.json", requestOptions)
    .then(response => response.json())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));

四年后更新，如果脱离上下文，请随时删除。尝试添加对我有用的 CORS_PROXY 位。我在 rss-parse npm 模块文档 https://www.npmjs.com/package/rss-parser

中找到了修复

【讨论】：