开发检测YouTube频道直播状态的异步函数时遭遇CORS错误的求助

嘿，我太懂你现在的困扰了——直接用fetch请求YouTube频道页面肯定会触发CORS错误，这是浏览器的安全机制在搞事情，YouTube的网页根本不允许前端跨域直接访问它的内容。别慌，咱们换个官方合规的方式来解决这个问题。

你应该用YouTube Data API v3来做这件事，这是官方提供的接口，支持跨域请求，而且能准确获取直播状态。下面给你两种可行的实现方式：

方法一：通过频道状态直接判断（配额消耗更少） #

这个方法调用channels.list接口，只需要获取频道的status字段，就能直接拿到直播状态，每次请求只消耗1个API配额（免费额度每天10000个，非常够用）。

首先你得去Google Cloud控制台申请一个API密钥，并且启用YouTube Data API v3，然后替换下面的API_KEY和CHANNEL_ID：

const API_KEY = '你的Google API密钥';
const CHANNEL_ID = 'XXXXXXXXXXXXXX'; // 你的目标频道ID

async function checkYouTubeLiveStatus() {
  try {
    const apiUrl = `https://www.googleapis.com/youtube/v3/channels?part=status&id=${CHANNEL_ID}&key=${API_KEY}`;
    const response = await fetch(apiUrl);
    const data = await response.json();

    if (data.items.length === 0) {
      console.error('找不到指定的YouTube频道');
      return null;
    }

    const liveStatus = data.items[0].status.liveBroadcastContent;
    switch(liveStatus) {
      case 'live':
        console.log('🎉 该频道正在直播！');
        return true;
      case 'upcoming':
        console.log('⏰ 该频道有即将开始的直播');
        return false;
      case 'none':
        console.log('😴 该频道当前没有直播');
        return false;
      default:
        console.log('⚠️ 无法识别直播状态');
        return null;
    }
  } catch (error) {
    console.error('检测直播状态时出错:', error);
    return null;
  }
}

// 调用函数检测状态
checkYouTubeLiveStatus();

方法二：搜索频道的直播视频（能获取更多直播详情） #

如果还想拿到直播的标题、封面图这些信息，可以用search.list接口，搜索该频道下正在直播的视频，每次请求消耗100个配额：

const API_KEY = '你的Google API密钥';
const CHANNEL_ID = 'XXXXXXXXXXXXXX';

async function getYouTubeLiveDetails() {
  try {
    const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=${CHANNEL_ID}&eventType=live&type=video&key=${API_KEY}`;
    const response = await fetch(apiUrl);
    const data = await response.json();

    if (data.items.length > 0) {
      const liveVideo = data.items[0];
      console.log('🎉 直播中！');
      console.log('直播标题:', liveVideo.snippet.title);
      console.log('直播封面图:', liveVideo.snippet.thumbnails.high.url);
      return { isLive: true, details: liveVideo.snippet };
    } else {
      console.log('😴 当前无直播');
      return { isLive: false, details: null };
    }
  } catch (error) {
    console.error('获取直播信息出错:', error);
    return { isLive: false, details: null };
  }
}

getYouTubeLiveDetails();

重要提醒 #

• 别把API密钥直接暴露在前端代码里！如果是纯前端项目，最好做一个简单的后端代理，让后端去调用YouTube API，前端请求自己的后端接口，防止密钥被盗用。
• 记得关注YouTube Data API的配额使用，免费额度足够小流量场景使用，但如果请求量很大，可能需要升级付费套餐。

内容来源于stack exchange