如何在无API的情况下用JavaScript和React提取并渲染其他网站数据？

核心问题：跨域限制 #

直接在React前端用fetch或axios请求第三方网站会触发浏览器的CORS策略，几乎都会被拦截，因此必须通过中间代理层绕开限制，这是最可靠的解决方案。

方案一：自建Node.js代理服务器（推荐） #

通过服务器端请求第三方网站（不受浏览器CORS限制），解析HTML后返回结构化数据给React前端。

1. 搭建代理服务器 #

用Express+Cheerio实现网页抓取与解析：

// server.js (Node.js 环境)
const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const cors = require('cors');

const app = express();
app.use(cors());

// 定义抓取接口
app.get('/api/scrape', async (req, res) => {
  try {
    // 请求目标第三方网站
    const targetRes = await axios.get('https://目标第三方网站域名');
    const $ = cheerio.load(targetRes.data); // 加载HTML到Cheerio

    // 解析需要的数据（示例：抓取文章标题和链接）
    const result = [];
    $('.post-title a').each((_, el) => {
      result.push({
        title: $(el).text().trim(),
        url: $(el).attr('href')
      });
    });

    res.json(result);
  } catch (err) {
    res.status(500).json({ error: '抓取失败，请检查目标网站或网络' });
  }
});

app.listen(3001, () => console.log('代理服务器运行在 http://localhost:3001'));

2. React前端调用代理接口 #

在组件中请求代理接口，渲染数据：

// ThirdPartyContent.jsx
import { useState, useEffect } from 'react';

const ThirdPartyContent = () => {
  const [content, setContent] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('http://localhost:3001/api/scrape');
        if (!res.ok) throw new Error('请求失败');
        const data = await res.json();
        setContent(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>加载中...</div>;
  if (error) return <div className="error">{error}</div>;

  return (
    <div className="third-party-content">
      <h3>第三方网站内容</h3>
      <ul>
        {content.map((item, idx) => (
          <li key={idx}>
            <a href={item.url} target="_blank" rel="noopener noreferrer">
              {item.title}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ThirdPartyContent;

方案二：iframe嵌入（仅展示整页，无法提取数据） #

如果不需要提取具体数据，只是展示第三方网站内容，可以直接用iframe嵌入：

<iframe
  src="https://目标第三方网站域名"
  width="100%"
  height="700px"
  title="第三方网站嵌入"
  sandbox="allow-same-origin allow-scripts" // 限制权限，提升安全性
></iframe>

关键注意事项 #

• 反爬风险：多数网站有UA检测、IP封禁等反爬机制，爬取前需遵守目标网站的robots.txt规则，避免法律风险。
• 数据缓存：在代理服务器端添加缓存（如Redis），定期更新数据，减少对第三方网站的请求频率。
• DOM维护：第三方网站的HTML结构可能随时变更，需同步调整解析规则，否则会导致数据抓取失败。

内容的提问来源于stack exchange，提问作者Jay Reddy