如何使用JS或React获取指定网页的《孤岛惊魂6》系统配置需求数据

首先要明确核心限制：目标站点默认未开放跨域访问权限，直接在前端侧发起请求会被CORS同源策略拦截，可根据需求选择以下两种可行路径：

方案1：离线爬取+静态调用（最简单，无跨域问题） #

游戏系统配置需求极少更新，更推荐这个低开发成本的方案：

1. 先用Node.js脚本爬取数据导出为静态JSON
   首先安装依赖：npm install axios cheerio
   爬取示例代码：

   const axios = require('axios');
   const cheerio = require('cheerio');
   
   const getFarCry6Specs = async () => {
     const response = await axios.get('https://gamesystemrequirements.com/game/far-cry-6');
     const $ = cheerio.load(response.data);
     const specResult = {
       minimum: {},
       recommended: {}
     };
   
     // 解析最低配置项，选择器可根据站点实际DOM结构调整
     $('.sysreq-min .spec-row').each((_, el) => {
       const label = $(el).find('.spec-label').text().trim();
       const value = $(el).find('.spec-value').text().trim();
       if (label && value) specResult.minimum[label] = value;
     });
   
     // 解析推荐配置项
     $('.sysreq-rec .spec-row').each((_, el) => {
       const label = $(el).find('.spec-label').text().trim();
       const value = $(el).find('.spec-value').text().trim();
       if (label && value) specResult.recommended[label] = value;
     });
   
     return specResult;
   };
   
   // 调用后将输出的JSON保存为far-cry-6-specs.json文件
   getFarCry6Specs().then(data => console.log(JSON.stringify(data, null, 2)));
   

2. React项目中直接导入静态JSON使用即可：

   import farCry6Specs from './far-cry-6-specs.json';
   
   export default function GameSpecCard() {
     return (
       <div className="spec-card">
         <h3>《孤岛惊魂6》最低配置</h3>
         {Object.entries(farCry6Specs.minimum).map(([label, value]) => (
           <p key={label}>{label}：{value}</p>
         ))}
         <h3>《孤岛惊魂6》推荐配置</h3>
         {Object.entries(farCry6Specs.recommended).map(([label, value]) => (
           <p key={label}>{label}：{value}</p>
         ))}
       </div>
     );
   }
   

方案2：实时拉取数据（需代理/后端中转） #

如果需要实时获取站点最新数据，必须绕过跨域限制：

• 本地开发阶段：可直接用React脚手架的代理配置，比如Create React App项目在package.json中添加配置项 "proxy": "https://gamesystemrequirements.com"，之后前端请求/game/far-cry-6会自动转发，不会触发跨域拦截
• 生产环境：需要自行搭建后端中转接口，在服务端完成站点请求、数据解析后再返回给前端，爬取解析逻辑和方案1的Node脚本完全一致

注意：爬取站点数据前请核对目标站点的爬虫规则与使用协议，避免违规使用。

内容的提问来源于stack exchange，提问作者Ali Sezer Yılmaz