使用Fetch API获取并展示RSS订阅源内容失败求助

Hi Momo，我瞅了你的代码和问题描述，问题大概率出在拿到代理返回的数据后，没有正确解析里面的RSS XML内容，也没完成后续的DOM插入步骤。咱们一步步来把这个问题搞定：

问题根源分析 #

你用的allorigins.win代理返回的是一个JSON对象，其中真正的RSS XML内容藏在data.contents字段里，你现在只拿到了整个JSON，但没对里面的XML做解析和处理，自然没法把新闻内容展示在页面上。

修复后的完整代码 #

我把你的代码修改并补充了关键步骤，你可以直接用：

<div id="scroll-text">
    <div class="section">
        <div id="scroll-container"></div>
    </div>
</div>

<script>
    async function fetchRSS() {
        const proxyUrl = 'https://api.allorigins.win/get?url=';
        const targetUrl = 'https://safeonweb.be/fr/rss';
        const fetchUrl = `${proxyUrl}${encodeURIComponent(targetUrl)}`;
        
        try {
            console.log('Fetching URL:', fetchUrl);
            const response = await fetch(fetchUrl);
            const data = await response.json();
            
            // 1. 提取代理返回的RSS XML原始内容
            const rssXmlContent = data.contents;
            console.log('RSS XML原始内容:', rssXmlContent);

            // 2. 把XML字符串解析成可操作的DOM对象
            const xmlParser = new DOMParser();
            const rssDoc = xmlParser.parseFromString(rssXmlContent, "application/xml");

            // 3. 获取RSS里的所有新闻条目（一般在<channel>下的<item>节点）
            const newsItems = rssDoc.querySelectorAll('channel item');
            console.log('找到的新闻条目数:', newsItems.length);

            // 4. 获取页面上的容器元素
            const scrollContainer = document.getElementById('scroll-container');

            // 5. 遍历每个新闻条目，创建DOM元素并插入页面
            newsItems.forEach(item => {
                // 提取条目的标题、链接、描述
                const title = item.querySelector('title').textContent;
                const link = item.querySelector('link').textContent;
                const description = item.querySelector('description').textContent;

                // 创建单个新闻的DOM元素（加了基础内联样式，你可以改成自己的CSS）
                const newsCard = document.createElement('div');
                newsCard.style.margin = '1rem 0';
                newsCard.style.padding = '1rem';
                newsCard.style.borderBottom = '1px solid #eee';
                newsCard.innerHTML = `
                    <h4 style="margin-top:0;"><a href="${link}" target="_blank" rel="noopener">${title}</a></h4>
                    <p>${description}</p>
                `;

                scrollContainer.appendChild(newsCard);
            });

        } catch (error) {
            // 捕获错误并给用户友好提示
            console.error('加载RSS失败:', error);
            const scrollContainer = document.getElementById('scroll-container');
            scrollContainer.innerHTML = '<p>抱歉，新闻加载失败，请稍后重试。</p>';
        }
    }

    // 页面加载后执行获取RSS的函数
    fetchRSS();
</script>

几个需要注意的细节 #

• 我在代码里加了一些基础的内联样式，你可以根据自己的页面风格改成外部CSS；
• 如果控制台显示newsItems数量为0，说明RSS的节点结构和预期不一样，你可以打印rssDoc到控制台，查看实际的XML节点层级，调整querySelectorAll的选择器；
• 遇到乱码的话，可以检查代理返回的data里的status字段，确认请求是否成功，一般这个代理会自动处理编码问题。

备注：内容来源于stack exchange，提问作者Momo