reactjs YouTube自动完成搜索API不工作

ovfsdjhp  于 2023-10-17  发布在  React
关注(0)|答案(2)|浏览(77)

我尝试使用YouTube自动完成API获取搜索结果,但出现错误:

const YOUTUBE_SEARCH_API = http://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=
const getSearchSuggetsions = async (text) => {
  const data = await fetch(YOUTUBE_SEARCH_API + text);
  const json = await data.json();
  console.log(json)
}

误差
CORS策略已阻止从源http://localhost:3000访问http://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=的获取:请求的资源上不存在“Access-Control-Allow-Origin”标头。如果一个不透明的响应满足了你的需求,将请求的模式设置为“no-cors”,以在禁用CORS的情况下获取资源。
当我写{mode:'no-cors'}然后我在网络选项卡中得到响应,但在控制台中没有得到结果,出现了一个错误,即“输入的意外结束”。

dxxyhpgq

dxxyhpgq1#

Access-Control-Allow-Origin是需要在服务器上而不是在客户端上设置的东西。由于您不控制服务器,因此有两个选项:
1.搜索另一个API,它允许你从任何地方发出请求。
1.您可以编写自己的后端作为 Package 器(例如http://localhost:4000/api/search),它接受参数,使用api获取数据并返回数据。

4ngedf3f

4ngedf3f2#

由于安全原因,源策略发生错误。要解决这个问题,您可以设置自己的后端,或者另一种方法是使用YouTube数据API,它需要一个API密钥,并允许您从前端代码中发出请求。以下是您需要采取的步骤:
1.获取API密钥:如果您的项目是在Google Cloud Console上创建的,请选择它,否则创建一个新项目。然后为您的项目启用YouTube数据API,并为API创建凭据,然后选择“API密钥”。这将生成一个API密钥,您将使用该密钥对请求进行身份验证。
1.构造API请求:YouTube数据API的基本URL是https://www.googleapis.com/youtube/v3/search。您需要将API密钥和必要的参数传递给API端点。您将使用的主要参数是'q',它是搜索查询。
1.提出请求:使用构造的URL向API端点发出(获取)请求。
一旦你有了JSON格式的响应数据,你就可以访问搜索结果,并根据需要在应用程序中处理它们。
下面是一个示例:

const YOUTUBE_SEARCH_API = "https://www.googleapis.com/youtube/v3/search";
const API_KEY = "YOUR_YOUTUBE_API_KEY";

const getSearchSuggestions = async (text) => {
  const params = new URLSearchParams({
    key: API_KEY,
    q: text,
  });

  const url = `${YOUTUBE_SEARCH_API}?${params}`;

  const response = await fetch(url);
  const data = await response.json();

  // Process and use the data
  console.log(data);
  // You can access items like data.items, which contains search results
};

getSearchSuggestions("your search query");

请记住将“YOUR_YOUTUBE_API_KEY”替换为您从Google Cloud Console获得的API密钥。

相关问题