React中获取YouTube页面时出现CORS错误求助

你遇到的问题是浏览器同源策略的限制：前端直接请求YouTube域名的资源时，YouTube服务器没有配置允许你的前端域名跨源访问，所以浏览器会拦截请求，这是浏览器的安全机制，前端层面的请求头、Axios这些操作都绕不开。

下面是可行的解决方法：

1. 搭建后端代理（最直接有效） #

后端服务不受浏览器同源策略限制，所以可以让前端请求自己的后端接口，由后端去请求YouTube获取HTML，再把结果返回给前端。

示例（Node.js + Express） #

后端代码：

const express = require('express');
const fetch = require('node-fetch');
const app = express();
const cors = require('cors');

app.use(cors()); // 允许前端跨域请求你的后端

app.get('/get-youtube-html', async (req, res) => {
  const videoId = req.query.video_id;
  if (!videoId || videoId.includes('http')) {
    return res.status(400).send('无效的视频ID');
  }
  const watchUrl = `https://www.youtube.com/watch?v=${videoId}`;
  try {
    const response = await fetch(watchUrl);
    const html = await response.text();
    res.send(html);
  } catch (err) {
    res.status(500).send('请求YouTube失败');
  }
});

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

前端代码修改：

async function get_subtitles(video_id: string): Promise<string> {
    if (video_id.includes('https://') || video_id.includes('http://'))
    throw new EvalError("You provided an invalid video id. Make sure you are using the video id and NOT the url!")

    // 请求自己的后端代理接口
    const proxyRes = await fetch(`http://localhost:3001/get-youtube-html?video_id=${video_id}`);
    const ytHTML = await proxyRes.text();

    // extract_captions_json(ytHTML, video_id);
    return ytHTML;
}

2. 使用YouTube官方Data API（更稳定规范） #

直接爬HTML容易因为YouTube页面结构更新导致失效，官方API是更可靠的方式，专门用于获取视频相关数据（包括字幕）。

步骤：

• 去Google Cloud控制台创建项目，启用YouTube Data API v3，获取API密钥
• 调用API的captions.list接口获取字幕资源，或者通过videos.list接口获取字幕轨道信息

示例请求（用API密钥）：

async function get_subtitles(video_id: string): Promise<string> {
    const API_KEY = '你的Google Cloud API密钥';
    const apiUrl = `https://www.googleapis.com/youtube/v3/captions?part=snippet&videoId=${video_id}&key=${API_KEY}`;
    
    const response = await fetch(apiUrl);
    const data = await response.json();
    // 根据返回的字幕ID，再请求获取字幕内容
    // 注意：部分字幕需要授权，公开字幕可以直接获取
    return JSON.stringify(data);
}

关键提醒 #

• 永远不要在前端直接请求第三方跨域资源，浏览器的同源策略会直接拦截，任何前端层面的header修改都没用
• 官方API虽然需要申请密钥，但稳定性远高于爬取HTML，避免YouTube页面更新导致功能失效

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