如何用JavaScript获取第三方网站HTML元素数据，TikTok抓取遇CORS报错如何解决

你遇到的是浏览器同源策略带来的CORS限制，TikTok服务端没有配置允许第三方站点跨域请求资源，所以直接在前端用jQuery.get跨域拉取TikTok页面的操作本身就不符合浏览器安全规则，前端层面没有直接绕过的办法。

方案1：基于WordPress后端代理实现（适合要在自己站点展示数据的场景） #

• 不需要在前端直接请求TikTok，而是通过你的WordPress后端发起请求，服务端请求不存在CORS限制
• 你可以在主题的functions.php中新增一个自定义REST接口，示例代码如下：

add_action('rest_api_init', function () {
  register_rest_route('tiktok_stats/v1', '/get_profile', [
    'methods' => 'GET',
    'callback' => function () {
      $response = wp_remote_get('https://www.tiktok.com/@triplicata');
      if (is_wp_error($response)) return [];
      return wp_remote_retrieve_body($response);
    }
  ]);
});

• 前端直接请求你自己站点的/wp-json/tiktok_stats/v1/get_profile接口拿HTML内容，不会有跨域问题

方案2：直接写浏览器油猴脚本（适合个人本地统计用） #

• 将脚本匹配规则设置为https://www.tiktok.com/@triplicata*，直接在TikTok个人页域名下运行，完全规避跨域问题
• 正确的播放量统计代码示例如下：

let totalViews = 0;
document.querySelectorAll('[data-e2e="video-views"]').forEach(el => {
  let text = el.textContent.trim();
  // 处理带单位的播放量，比如12.3K转12300，1.2M转1200000
  let num = 0;
  if (text.endsWith('K')) {
    num = parseFloat(text) * 1000;
  } else if (text.endsWith('M')) {
    num = parseFloat(text) * 1000000;
  } else if (text.endsWith('B')) {
    num = parseFloat(text) * 1000000000;
  } else {
    num = parseInt(text);
  }
  totalViews += num;
});
console.log('总播放量：', totalViews);

• $0是浏览器控制台的专属临时变量，仅在你手动用元素选择器选中某个DOM节点时生效，写入正式代码没有任何作用，无法定位元素
• TikTok页面是客户端渲染，直接拉取的静态HTML没有加载完成的视频列表数据，要么用无头浏览器渲染后解析，要么调用TikTok公开的用户作品接口拿数据，稳定性远高于解析HTML
• jQuery.each的使用方式错误，你传入的是字符串"$0"而不是DOM集合，根本无法遍历出有效内容

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