我尝试使用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'}然后我在网络选项卡中得到响应,但在控制台中没有得到结果,出现了一个错误,即“输入的意外结束”。
2条答案
按热度按时间dxxyhpgq1#
Access-Control-Allow-Origin
是需要在服务器上而不是在客户端上设置的东西。由于您不控制服务器,因此有两个选项:1.搜索另一个API,它允许你从任何地方发出请求。
1.您可以编写自己的后端作为 Package 器(例如http://localhost:4000/api/search),它接受参数,使用api获取数据并返回数据。
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格式的响应数据,你就可以访问搜索结果,并根据需要在应用程序中处理它们。
下面是一个示例:
请记住将“YOUR_YOUTUBE_API_KEY”替换为您从Google Cloud Console获得的API密钥。