React.js中获取第三方网站HTML及解决CORS问题的简易方法

浏览器的同源策略会阻止前端直接请求非同源的第三方网站，所以必须通过自建代理服务器中转请求。下面是针对新手的极简实现方案：

第一步：搭建简易Node.js代理服务器 #

这个代理只需要几行代码，无需复杂配置：

1. 创建一个新文件夹（比如proxy-server），在文件夹内打开终端，初始化项目：

npm init -y

2. 安装所需依赖：

npm install express cors axios

3. 创建server.js文件，写入以下代码：

const express = require('express');
const cors = require('cors');
const axios = require('axios');

const app = express();
const PORT = 3001;

// 允许所有跨域请求（开发环境可用，生产环境建议限制来源）
app.use(cors());

// 代理接口，接收前端传入的目标网站URL
app.get('/fetch-site', async (req, res) => {
  try {
    const targetUrl = req.query.url;
    if (!targetUrl) {
      return res.status(400).send('请传入目标网站URL');
    }

    // 发送请求到第三方网站，指定返回纯文本格式
    const response = await axios.get(targetUrl, {
      responseType: 'text',
      // 模拟浏览器请求头，避免部分网站拦截
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
      }
    });

    // 将第三方网站的状态码和HTML内容返回给前端
    res.status(response.status).json({
      statusCode: response.status,
      html: response.data
    });
  } catch (error) {
    // 处理请求失败的情况，返回对应状态码和错误信息
    res.status(error.response?.status || 500).json({
      statusCode: error.response?.status || 500,
      error: error.message
    });
  }
});

app.listen(PORT, () => {
  console.log(`代理服务器运行在 http://localhost:${PORT}`);
});

4. 启动代理服务器：

node server.js

第二步：React端调用代理接口 #

在你的React组件中，通过代理接口获取目标网站的内容和状态码：

import { useState } from 'react';
import axios from 'axios';

function App() {
  const [htmlContent, setHtmlContent] = useState('');
  const [statusCode, setStatusCode] = useState(null);
  const [errorMsg, setErrorMsg] = useState('');

  const fetchTargetSite = async () => {
    try {
      const targetUrl = 'https://google.com'; // 替换为你要请求的网站
      const response = await axios.get('http://localhost:3001/fetch-site', {
        params: { url: targetUrl }
      });

      setStatusCode(response.data.statusCode);
      setHtmlContent(response.data.html);
      setErrorMsg('');
    } catch (err) {
      setErrorMsg(err.response?.data?.error || '请求失败');
      setStatusCode(err.response?.data?.statusCode || null);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <button onClick={fetchTargetSite}>获取网站内容</button>
      {statusCode && <p>状态码: {statusCode}</p>}
      {errorMsg && <p style={{ color: 'red' }}>{errorMsg}</p>}
      {htmlContent && (
        <pre style={{ maxHeight: '400px', overflow: 'auto' }}>
          {htmlContent.slice(0, 800)}... {/* 只显示前800字符避免页面卡顿 */}
        </pre>
      )}
    </div>
  );
}

export default App;

生产环境注意事项 #

• 部署代理服务器时，需限制CORS允许的来源，避免被滥用：将app.use(cors())改为app.use(cors({ origin: '你的React生产域名' }))。
• 部分网站可能有反爬机制，可根据需求调整请求头或添加简单的延迟逻辑。

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