YouTube Autocomplete API调用失败：CORS及数据解析问题求助

问题本质 #

直接在前端调用suggestqueries.google.com的自动补全接口会触发浏览器CORS限制，因为该接口没有配置允许localhost:3000跨域访问的响应头。添加{mode: 'no-cors'}后，浏览器返回的是不可读取的不透明响应，所以调用data.json()时会报"Unexpected end of input"错误——根本读不到内容自然解析失败。

可行解决方案 #

1. 用后端代理（推荐生产环境使用） #

前端请求自己的后端服务，由后端去调用YouTube的接口，再把结果返回给前端。后端不受浏览器CORS规则限制，以Node.js/Express为例：

后端代码：

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

// 代理接口
app.get('/api/youtube-suggest', async (req, res) => {
  const query = req.query.q;
  const apiUrl = `http://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=${encodeURIComponent(query)}`;
  try {
    const response = await axios.get(apiUrl);
    res.json(response.data);
  } catch (err) {
    res.status(500).send('请求失败');
  }
});

app.listen(port, () => {
  console.log(`代理服务运行在 http://localhost:${port}`);
});

修改后的前端代码：

const getSearchSuggetsions = async (text) => {
  const res = await fetch(`http://localhost:4000/api/youtube-suggest?q=${encodeURIComponent(text)}`);
  const data = await res.json();
  console.log(data);
};

2. 改用官方YouTube Data API #

Google提供了正规的YouTube Data API，需要先在Google Cloud Console申请API密钥并启用YouTube Data API服务。示例代码：

const API_KEY = '你的API密钥';
const getSearchSuggetsions = async (text) => {
  const apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${encodeURIComponent(text)}&type=video&key=${API_KEY}`;
  const res = await fetch(apiUrl);
  const data = await res.json();
  // 提取视频标题作为搜索建议
  const suggestions = data.items.map(item => item.snippet.title);
  console.log(suggestions);
};

3. 临时使用JSONP（仅推荐本地测试） #

该接口支持JSONP格式，通过动态创建<script>标签绕过CORS限制：

const getSearchSuggetsions = (text) => {
  const script = document.createElement('script');
  script.src = `http://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=${encodeURIComponent(text)}&callback=handleSuggest`;
  document.body.appendChild(script);
};

// 全局回调函数
function handleSuggest(data) {
  console.log(data);
  // 用完后移除动态创建的script标签
  const script = document.querySelector(`script[src*="suggestqueries.google.com"]`);
  if (script) document.body.removeChild(script);
}

注意：JSONP仅支持GET请求，且存在XSS安全风险，不适合生产环境使用。

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