调用Google搜索建议API遇语法错误，寻求技术排查解决

我帮你排查下这个问题——你遇到的Uncaught SyntaxError: Unexpected token '<'通常意味着接口返回的不是你预期的JSONP数据，而是HTML（比如错误页面、反爬拦截页面）。咱们一步步拆解原因和解决方案：

核心原因分析 #

Google的suggestqueries接口对前端直接调用有严格限制：

1. 跨域+反爬限制：虽然你用了JSONP适配器，但Google很可能识别出请求来自前端页面，直接返回HTML错误页而非JSONP。
2. 代码本身的小问题：组件里searchQuery状态未定义、缺少错误捕获、状态初始化逻辑不合理，这些也会间接导致异常。

解决方案与代码修正 #

1. 修正Axios JSONP配置 #

首先调整你的suggestSearch配置，注意baseURL不要带末尾的?（Axios会自动拼接参数），同时明确指定返回格式：

import axios from "axios";
import jsonpAdapter from "axios-jsonp";

export default axios.create({
  baseURL: "https://suggestqueries.google.com/complete/search",
  adapter: jsonpAdapter,
  params: {
    hl: "en", // 语言设置
    ds: "yt",  // 限定YouTube内容范围
    client: "youtube", // 强制返回YouTube风格响应
    format: "json" // 明确要求JSON格式，确保返回JSONP结构
  }
});

2. 修复React组件的问题 #

你的组件存在几个明显问题：searchQuery状态未定义、缺少错误捕获、状态初始化不合理，以下是修正后的完整组件：

import React, { useState } from 'react';
import suggestSearch from "../../Apis/suggestSearch";

const SearchSuggestions = () => {
  // 新增搜索关键词状态
  const [searchQuery, setSearchQuery] = useState("");
  // 搜索建议初始化为空数组，更符合数据结构
  const [autoSearchData, setAutoSearch] = useState([]);

  const getAutocomplete = async () => {
    // 空关键词不发起请求，避免无效调用
    if (!searchQuery.trim()) {
      setAutoSearch([]);
      return;
    }

    try {
      const response = await suggestSearch.get("", {
        params: {
          q: searchQuery,
        }
      });
      // 先打印原始返回数据，确认格式是否正确
      console.log("接口返回原始数据:", response.data);
      // 做容错处理，避免接口返回格式异常导致报错
      setAutoSearch(response.data[1] || []);
    } catch (error) {
      console.error("获取搜索建议失败:", error);
      // 这里可以添加用户可见的错误提示，比如弹窗提示
      setAutoSearch([]);
    }
  };

  // 示例UI：输入框失焦触发查询，也可改成实时触发（记得加防抖）
  return (
    <div className="search-suggest-container">
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        onBlur={getAutocomplete}
        placeholder="输入关键词搜索..."
      />
      {autoSearchData.length > 0 && (
        <ul className="suggest-list">
          {autoSearchData.map((suggestion, index) => (
            <li key={index}>{suggestion}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default SearchSuggestions;

3. 终极解决：后端代理（如果前端调用仍失败） #

如果上述调整后还是返回HTML错误，那就是Google的反爬机制拦截了前端请求。这时候必须通过后端代理：

• 用Node.js/Java/Python等写一个简单的后端接口，由后端去请求Google的suggestqueries接口。
• 前端调用自己的后端接口，这样可以绕过跨域和反爬限制。

举个Node.js Express代理的简单例子：

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

app.get('/api/suggest', async (req, res) => {
  try {
    const { q } = req.query;
    const response = await axios.get('https://suggestqueries.google.com/complete/search', {
      params: {
        hl: 'en',
        ds: 'yt',
        client: 'youtube',
        format: 'json',
        q: q
      }
    });
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: '获取建议失败' });
  }
});

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

然后前端的Axios配置改成调用这个代理接口即可。

关键注意点 #

• 一定要加错误捕获：异步请求随时可能失败，try-catch能避免页面崩溃。
• 空请求过滤：不要在关键词为空时发起请求，减少无效调用。
• 防抖处理：如果要实时触发查询，记得加防抖（比如300ms延迟），避免频繁请求被拦截。

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