0
668
VisualizaçõesError: la solicitud falló con el código de estado 403 - Problema con Axios, posible intercambio por recuperación
Estoy usando axios en una aplicación Nextjs donde uso la API de Youtube y ocurrió el siguiente error 
A continuación se muestra el código
import React from "react"; import youtube from "./api"; import VideoList from "./VideoList"; class App extends React.Component { state = { videos: [], }; componentDidMount() { this.onTermSubmit("Car"); } onTermSubmit = async (term) => { const res = await youtube.get("/search", { params: { q: term, }, }); this.setState({ videos: res.data.items }); }; render() { return ( <> <div> <div > <VideoList videos={this.state.videos} /> </div> </div> </> ); } } export default App;El otro
import axios from 'axios'; const KEY = "xxxxx"; export default axios.create({ baseURL: "https://www.googleapis.com/youtube/v3", params: { part: "snippet", maxResults: 16, key: KEY, }, });Me gustaría un consejo sobre cómo resolver esto y si la mejor solución sería cambiar de Axios a buscar. El problema es que no sé cómo cambiar de Axios a fetch.
2 Respostas
Responde à pergunta0
No creo que esté relacionado con el paquete. Porque 403 es un código de estado de respuesta prohibido que indica que el servidor entiende la solicitud pero se niega a autorizarla. Lo más probable es que pase la clave de API incorrecta. Si necesita obtener los datos con fetch , puede escribir una función reutilizable:
// genre is like video type. for example Productivity const videos = async (genre) => { const YOUTUBE_API_KEY = process.env.YOUTUBE_API_KEY; const BASE_URL = "youtube.googleapis.com/youtube/v3"; const response = await fetch( `https://${BASE_URL}/${genre}&maxResults=25&key=${YOUTUBE_API_KEY}` ); return await response.json(); };esto es de documentos
Recibió un error 401 o 403
Si obtiene un error 401 o 403 al analizar una muestra, es probable que se deba a un problema con uno de los siguientes:
- La API no está habilitada para su proyecto. Revise las instrucciones para su API sobre cómo crear un proyecto y habilitar una API.
- Está utilizando el tipo de autorización incorrecto (clave de API en lugar de OAuth 2.0).
- Está utilizando OAuth 2.0, pero con un alcance demasiado limitado.
- Cuando configura su clave API, establece restricciones para evitar el uso no autorizado de sus credenciales. Sin embargo, la solicitud no cumple con esas restricciones.
0
Desactualización a AXIOS 0.26.0
Probablemente esté utilizando la última versión automáticamente.
Relacionado: https://github.com/axios/axios/issues/4638