RSS ??? ?? ??????? ????? ?? ? ???? ?? CORS ??? ???? XML ???? ?? ???????. ?? ??? ??? ????. 1. CORS ??? (?? ??)? ????? ?? ?? (?? ??)? ???? RSS ??? ????. 2. domparser? ???? XML? JavaScript ??? ??????. 3. Parsed JSON ???? ???? React ?? ?? ??? ?????? ??????. 4. ???? ??, ??, ?? ? ??? ????? ????? HTML ???? ???? ?????. 5. ??? ????? ???? ??, ?? ??, ?? ?? ? ?? ? ??? ???? ?? ????. ??? ? ??? ?? API?? ?? ???? ?????.

RSS ??? React ?? ????? ???? ?? ?? API? ???? ?? ??? ???, ?? ???? ?? ? ???? ?? ?? ???? ?? ?? ?? ?? ? ? ????. RSS? JSON? ???? ? ?? ?? ??? ?? ???? ????? ?? ? ? ????. ????? ???? ???? ???? ??? ??? ????.

RSS ??? React?? ?? ??? ??? ??

RSS ??? JSON? ?? XML???. ????? JavaScript? XML? JSON?? ?? ?? ???? ??? Modern fetch() ????? XML? ???? ????. ??, ?? RSS ??? ?? ??? ??? ?? (CORS)? ???? ?? ??? ????? ?????? ??? ???? ?? fetch() ? ????.

??? ? ??? ?????.

1. XML? ?? ??? JavaScript ??? ???? ??.
2. ??? ?? ???? ??? ?? CORS? ???? ??.

1 ?? : RSS ??? ?? ?? ?? ?????

CORS? ?? ???????? RSS? ????? ??? ? ???? ???? ??? ? ??? ??? ??? ?? ???? ??? ???? ????.

?? A : Cors ??? ?? (?? & simple)

?? ?? ??? ?? ?? http://ipnx.cn/link/eb852fa9d9e60316fa715602baf5bc05 ? ?? ?? Cors ???? ??????.

 const fetchrssfeed = async () => {
  const proxyurl = 'http://ipnx.cn/link/eb852fa9d9e60316fa715602baf5bc05/get';
  const rssurl = 'https://example.com/feed.xml';

  ???? {
    const response = await fetch (`$ {proxyurl}? url = $ {encodeUricomponent (rssurl)}`);
    const data = await response.json ();
    const parser = new domparser ();
    const xmldoc = parser.parsefromstring (data.contents, 'text/xml');

    const items = array.from (xmldoc.queryselectorall ( 'item')). map (item => ({{
      ?? : item.querySelector ( 'title')?. TextContent || '',
      ?? : item.querySelector ( 'link')?. TextContent || '',
      PubDate : item.querySelector ( 'PubDate')?. TextContent || '',
      ?? : item.querySelector ( 'description')?. TextContent || '',
    });

    ?? ??;
  } catch (??) {
    Console.error ( '?? ?? RSS ?? :', ??);
    ?? [];
  }
};

?? ?? : ?? ???? ???? ??? ? ????. ??? ???? ????.

?? B : ???? ?? ?? (??)

RSS ?? ?? ??? ?? ?? ??? ??? ?? ??? (? : Vercel, Netlify ?? Express)? ????.

Vercel API ?? ( /api/rss.js )? ? :

 ???? ?? ??? ?? ??? (req, res) {
  const rssurl = 'https://example.com/feed.xml';

  ???? {
    const response = ???? ?? (rssurl);
    const xmltext = await response.text ();
    const parser = new domparser ();
    const xmldoc = parser.parsefromstring (xmltext, 'text/xml');

    const items = array.from (xmldoc.queryselectorall ( 'item')). map (item => ({{
      ?? : item.querySelector ( 'title')?. TextContent || '',
      ?? : item.querySelector ( 'link')?. TextContent || '',
      PubDate : item.querySelector ( 'PubDate')?. TextContent || '',
      ?? : item.querySelector ( 'description')?. TextContent || '',
    });

    res.status (200) .json (??);
  } catch (??) {
    res.status (500) .json ({error : 'RSS ??? ?? ?? ???');
  }
}

?? ?? React ?? ???? :

 const [posts, setposts] = usestate ([]);

useeffect (() => {
  const loadfeed = async () => {
    const res = ???? ?? ( '/api/rss');
    const data = await res.json ();
    setPosts (???);
  };
  ?? ?? ();
}, []);

2 ?? : ?? ??? ??? ?????

?? ?? ???? ??? ?????.

 ?? rssfeed () {
  const [posts, setposts] = usestate ([]);
  const [??, setloading] = usestate (true);

  useeffect (() => {
    const loadfeed = async () => {
      ???? {
        const res = ???? ?? ( '/api/rss');
        const data = await res.json ();
        setPosts (???);
      } catch (??) {
        Console.error ( '??????? ???');
      } ????? {
        setloading (false);
      }
    };
    ?? ?? ();
  }, []);

  if (loading) return <p> ?? ?? ... </p>;

  ?? (
    <div classname = "rss-feed">
      <H2> ?? ??? </h2>
      <ul>
        {posts.map ((??, ??) => (
          <li key = {index}>
            <H3>
              <a href = {item.link} target = "_ blank"rel = "noopener noreferrer">
                {item.title}
              </a>
            </h3>
            <p classname = "date"> {? ?? (item.pubdate) .tolocaledatestring ()} </p>
            <div
              classname = "??"
              DangerousLySetInnerhtml = {{__html : item.description}}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

??? ?

• ???? HTML? ????? . RSS ???? ?? HTML? ?????. dangerouslySetInnerHTML ??? ????? ??? ???? ?? DOMPurify ? ?? ???? ???? ?? ??????.
• ?? ?? : RSS? ? ??? ???? ????. ??? ??? ?? ??? ??? ?? ?? ? (? : Redis ?? Memory Cache)? ??? ??????.
• ?? ?? ?? : ??????? ??? ??? ???? ?????.
• ?? ?? : 100 ?? ???? ????? ????. .slice(0, 5) ???? ?? ? ??? ??????.

??

RSS ??? RECT? ???? ?? ??? ????.

1. CORS ?? (??? ?? ???? ??).
2. XML? JavaScript ??? ?? ?????.
3. ?? ??? ???? ?????.

JSON API? ???? ?? ? ????? ??? ?? ??? ???? ???? ?? ????? ?? ???? ???? ? ???? ???? ?????.

????? ??? ??? ???? XML? ?? ???? ??? ?? ??? ???? ??????.

? ??? React ?? ?????? RSS ?? ?? ? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!