无需API用JavaScript检测YouTube频道直播，遇CORS问题求解决

问题描述 #

我找到了一段无需API即可检测YouTube频道是否直播的JavaScript代码，逻辑是抓取频道页面HTML，通过判断是否包含hqdefault_live.jpg标识来检测直播状态，但运行时被浏览器CORS策略拦截，无法正常执行。

原代码 #

var channelid = "UCnB-Fhp5FQfCZNfdAvm27Qw"; // 替换为你的频道ID

function onlive() {
  // 频道直播时执行的逻辑
}

/* 剩余代码 */

fetch('https://www.youtube.com/channel/' + channelid).then(function (response) {
    return response.text();
}).then(function (html) {
  if (html.includes("hqdefault_live.jpg")) {
    onlive();
  }
}).catch(function (err) {
    console.warn('Something went wrong', err);
});

报错截图 #

解决方案 #

1. 后端代理（推荐方案） #

浏览器的CORS限制是前端跨域请求的安全机制，最稳定的解决方式是通过自己的后端服务器转发请求：

• 搭建一个后端接口，负责请求YouTube频道页面并返回判断结果
• 前端调用自己的后端接口，避免直接跨域请求YouTube
• 示例Node.js（Express）后端代码：

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

app.get('/api/check-live', async (req, res) => {
  const channelId = req.query.channelId;
  try {
    const pageRes = await axios.get(`https://www.youtube.com/channel/${channelId}`);
    const isLive = pageRes.data.includes('hqdefault_live.jpg');
    res.json({ isLive });
  } catch (err) {
    res.status(500).json({ error: '请求失败' });
  }
});

app.listen(3000, () => console.log('代理服务运行在3000端口'));

• 前端修改后的请求代码：

fetch(`/api/check-live?channelId=${channelid}`)
  .then(res => res.json())
  .then(result => {
    if (result.isLive) {
      onlive();
    }
  })
  .catch(err => console.warn('请求出错', err));

2. 使用YouTube官方Data API（更可靠） #

虽然原代码想避开API，但官方API是最稳定的检测方式，且支持前端直接请求（不会触发CORS）：

• 前往Google开发者平台创建项目，获取API密钥
• 使用search.list接口，通过参数筛选直播内容
• 前端示例代码：

const apiKey = '你的Google API密钥';
fetch(`https://www.googleapis.com/youtube/v3/search?channelId=${channelid}&eventType=live&type=video&key=${apiKey}`)
  .then(res => res.json())
  .then(data => {
    // 返回结果不为空则说明正在直播
    if (data.items.length > 0) {
      onlive();
    }
  })
  .catch(err => console.warn('请求出错', err));

注：免费版API有调用限额，普通使用完全足够。

3. 浏览器扩展环境（仅适用于扩展开发） #

如果是开发浏览器扩展，可在manifest.json中配置跨域权限，绕过CORS限制：

{
  "permissions": [
    "https://www.youtube.com/*"
  ]
}

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