ReactJs调用Google自定义搜索API报错：Request contains an invalid argument

核心问题 #

控制台显示key=undefined，说明你的React应用没有正确读取到环境变量REACT_APP_SEARCH_KEY，这直接导致Google API返回"Request contains an invalid argument"错误。

解决步骤 #

1. 确认环境变量文件配置正确

   • 在项目根目录创建（或检查已有的）.env文件，变量名必须以REACT_APP_为前缀，格式如下：

     REACT_APP_SEARCH_KEY=你的Google API密钥
     REACT_APP_SEARCH_ENGINE_KEY=你的自定义搜索引擎ID
     

   • 注意：不要给密钥加引号，不要在=两边加空格，否则会导致变量读取失败。

2. 重启开发服务器
   React只会在启动开发服务器时加载环境变量，修改.env后必须停止当前的npm start进程，重新执行npm start，新的环境变量才会生效。

3. 检查变量拼写一致性
   确保代码中process.env.REACT_APP_SEARCH_KEY的变量名和.env文件里的完全一致，大小写敏感，比如REACT_APP_SEARCH_KEY不能写成react_app_search_key。

4. 补充Google API必填参数
   Google自定义搜索API要求必须同时传入key（API密钥）和cx（搜索引擎ID）两个参数，只传key也会触发参数无效错误，修正后的请求URL应该是：

   const apiCall = `${BASE_URL}?key=${API_KEY}&cx=${SEARCH_ENGINE_KEY}&q=${searchText}`
   

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