如何在React客户端执行目标站点<script>后进行网页爬取？

首先明确：浏览器的同源策略是无法在客户端绕过的核心限制，不存在能在React客户端环境中安全执行其他域名<script>并访问其DOM内容的JS包。原因很简单——浏览器的安全机制从根本上禁止跨域脚本的执行和跨域DOM访问，这是为了防止恶意网站窃取用户数据。

你尝试过的方案各自的局限：

• Puppeteer/jsdom：确实只能在服务端运行，因为它们需要完整的Node.js环境来模拟浏览器，不受浏览器同源策略约束
• <iframe>：跨域时，浏览器会严格隔离iframe内部的文档，你无法通过父页面JS访问其DOM或执行的脚本内容
• DOMParser：解析跨域HTML时，浏览器会自动禁用其中的<script>标签，且即使解析完成，也无法模拟脚本执行后的DOM状态

可行替代方案 #

既然客户端无法实现，唯一靠谱的方式是通过服务端代理来完成爬取：

1. 在你的后端部署Puppeteer或Playwright这类无头浏览器工具，接收前端传来的目标网站URL
2. 服务端用无头浏览器加载目标页面，等待所有JS执行完成，提取页面中的链接
3. 将提取到的链接返回给前端React应用，前端再递归请求服务端处理后续链接

这种方式既避开了浏览器的同源限制，又能完整模拟JS渲染后的页面状态，是目前这类需求的标准解决方案。

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